#はじめに
この記事は、JavaScriptを勉強中の方向けに書いています。また私自身のアウトプットとして書いています。
内容は以下の通りです。

scrollTo()メソッドを使ったページのスクロール実装
setInterval()メソッドでアニメーション化

#scrollToメソッドとは
scrollToメソッドは指定ページまでスクロールさせるメソッドです。引数を渡してどこまでスクロールするか指定できます。

.js

window.scroll(0,1000);  //第１引数は水平方向、第２引数は垂直方向を渡す

#setIntervalメソッドとは
setIntervalメソッドは渡された引数ミリ秒後に関数を実行するメソッドです。第１引数にコールバック関数、第２引数に何秒間隔で実行するかを指定します。（単位はミリ秒）

.js

setInterval(()=>{
  //処理
},1000);

#準備
あるボタンをクリックしたら下方向にスクロールするというものを実装したいと思います。
事前にhtmlとスタイルシートを準備しました。
100vhごとに赤色、青色、黄色背景にするようにしています。スクロールボタンも設置しています。

test.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/test.css">
    <title>Test</title>
</head>
<body>
    <div class='red'>
        <a href="#" class="arrow"></a>
    </div>
    <div class='blue'>
        <a href="#" class="arrow"></a>
    </div>
    <div class='yellow'>
    </div>
</body>
</html>

test.css

.arrow{
    position: center bottom;
    display: block;
    width: 80px;
    height: 80px;
    border-top: 10px solid #b0b0b0;
    border-right: 10px solid #b0b0b0;
    transform: rotate(135deg);
    margin-top: 80vh;
}
.red{
    background-color: red;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}
.blue{
    background-color: blue;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.yellow{
    background-color: yellow;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#実装
arrowクラスをつけているaタグをクリックした時に、スクロールの関数を実行するようにします。
またスクロールの移動にアニメーション要素を入れたいので、数十ミリ秒間隔で関数を呼ぶようにします。

.scroll.js

const scrollDown = (position)=>{
    let count = position
    setInterval( ()=>{
        count += 50
        if(count<position + 1000){
            window.scrollTo(0, count)
        }
    },10)
}

次に、ボタンをクリックした時にこの関数を呼び出したいので、onclick属性を追加します。
また、jsファイルの読み込みも追加します。

test.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/test.css">
    <script src='scroll.js' defer></script>
    <title>Test</title>
</head>
<body>
    <div class='red'>
        <a href="#" class="arrow" onclick='scrollDown(0)'></a>
    </div>
    <div class='blue'>
        <a href="#" class="arrow" onclick='scrollDown(1000)'></a>
    </div>
    <div class='yellow'>
    </div>
</body>
</html>

これで矢印をクリックすると
赤色→青色→黄色
というようにスクロールされるはずです。

#参考
CSSで作るシンプルな矢印アイコン29個