ページの先頭にスムーススクロール | 動くWebデザインアイディア帳

ページトップリンク
-ページの先頭にスムーススクロール-

デモページを見る

See the Pen 8-1-1 ページの先頭にスムーススクロール by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内のリンクをクリックして動きを確かめてね！

動きを実現する仕組み

jQuery を使い、指定した要素をクリックしたらページのトップまで移動する。

［使用するライブラリ］
＊ jQuery

HTMLの書き方

body内のページの先頭に戻るリンクを表示させたい場所にHTMLを記載します。
```
<p id="page-top"><a href="#">Page Top</a></p>
```

body 終了タグ直前に jQuery、動きを制御する自作のJS の2 つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="js/8-1-1.js"></script>
</body>

自作のJS内の書き方

// #page-topをクリックした際の設定
$('#page-top').click(function () {
    $('body,html').animate({
        scrollTop: 0//ページトップまでスクロール
    }, 500);//ページトップスクロールの速さ。数字が大きいほど遅くなる
    return false;//リンク自体の無効化
});