javascript スムーススクロール

2021年8月22日 20:36

こんにちは、fukuです。
今回はスムーススクロールを作成したのでその解説です。

流れは、htmlで上部に戻るボタンを作って
クリックしたら、top: 0にスクロールさせる！
以上！

前回のハンバーガーメニューよりはコードが少なくて
ちょっと楽でした！

html・javascript

<!DOCTYPE html>
<html lang="ja" dir="ltr">
 <head>
   <meta charset="utf-8">
   <link rel="stylesheet" href="index.css">
   <title></title>
 </head>
 <body>

   <section>
     <h1>スムーススクロール</h1>
   </section>

   <main>
     <div id="scroll_top">
       <p>上部に戻る</p>
     </div>
   </main>

   <script type="text/javascript">
     'use strict'

     const scroll_top = document.getElementById('scroll_top');

     scroll_top.addEventListener('click', function(){
       window.scrollTo({
         top: 0,
         behavior: 'smooth'
       })
     });

   </script>
 </body>
</html>

css

@charset "UTF-8";
body{
 margin: 0;
}

h1{
 color: #fff;
}

section{
 display: flex;
 justify-content: space-between;
 align-items: center;
 background-color: #9fca99;
 height: 100px;
}

main{
 height: 1000px;
 background-color: #6ea7a1;
 position: relative;
}

#scroll_top p{
 position: absolute;
 right: 20px;
 bottom: 20px;
 width: 100px;
 background-color: #fff;
 margin: 0;
 border-radius: 10px;
 text-align: center;
 cursor: pointer;
 transition: all 0.2s;
}

#scroll_top p:hover{
 transform: scale(1.1);
 color: #f0821e;
}

まずは、htmlでボタン作り

     <div id="scroll_top">
       <p>上部に戻る</p>
     </div>

後で思ったことだけど
buttonタグで作っても良かったのかな？

今回は、pタグで作りました。

#scroll_top p{
 position: absolute;
 right: 20px;
 bottom: 20px;
 width: 100px;
 background-color: #fff;
 margin: 0;
 border-radius: 10px;
 text-align: center;
 cursor: pointer;
 transition: all 0.2s;
}

#scroll_top p:hover{
 transform: scale(1.1);
 color: #f0821e;
}

それをcssで
形を整えて、、
position: absoluteで位置を決める

fixedにしてもいいかも

マウスホバーした時にわかりやすいように
hoverでちょっと変化をつける

     const scroll_top = document.getElementById('scroll_top');

     scroll_top.addEventListener('click', function(){
       window.scrollTo({
         top: 0,
         behavior: 'smooth'
       })
     });

つぎは、javascriptです。
まず、ボタンのidをscroll_topに定数にする。

addEventListenerをclickにして
scrollをトップの０に設定
スクロールスピードはbehaviorをsmoothにする。

終わり！

これでスムーススクロールの解説は終わりです。
コード自体は短いですが、ちゃんと動くと嬉しいですね！

この記事が気に入ったらサポートをしてみませんか？