はじめに
この記事は、JavaScriptを勉強中の方向けに書いています。また私自身のアウトプットとして書いています。
内容は以下の通りです。
- scrollTo()メソッドを使ったページのスクロール実装
- setInterval()メソッドでアニメーション化
scrollToメソッドとは
scrollToメソッドは指定ページまでスクロールさせるメソッドです。引数を渡してどこまでスクロールするか指定できます。
window.scroll(0,1000); //第１引数は水平方向、第２引数は垂直方向を渡す
setIntervalメソッドとは
setIntervalメソッドは渡された引数ミリ秒後に関数を実行するメソッドです。第１引数にコールバック関数、第２引数に何秒間隔で実行するかを指定します。（単位はミリ秒）
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>
これで矢印をクリックすると
赤色→青色→黄色
というようにスクロールされるはずです。