ページトップリンク＋スムーススクロール

概要

下記４つの方法で実現します

• jQuery
• CSS
• JavaScript
• JavaScript+Vue.js

jQueryでの実現方法

参考書籍

動くWebデザイン アイディア帳

実現方法

• ページトップリンク　aタグでトップ(#)にリンクする

       -----省略-----
        <p id="page-top"><a href="#">Page Top</a></p>   

• ページトップリンクをクリックするとjQuery animate scrollTop:0 へ移動させる

$('#page-top').click(function () {
     $('body,html').animate({
        scrollTop: 0
    }, 500);
    return false;
});

結果

思った通りに動作しました

return falseの意味は下記で確認しました
【JavaScript】return falseの意味について総まとめ。コード付で解説

CSSでの実現方法

参考

CSSのみ！簡単にスムーズスクロールを導入する
htmlはjQueryの場合と同じです

html {
    scroll-behavior: smooth;
}

結果

思った通りに動作しました

注意点

Safari、Opera、IEには対応していません

JavaScriptでの実現方法

参考

【脱jQuery】Javascriptのみでスムーススクロールを実装【コピペ】

• htmlの内容はjQueryに加えてid要素を付与

       -----省略-----
        <p id="page-top"><a id = "page_top_link" href="#">Page Top</a></p>  

• JSでaタグのクリックでスムースクロールする ※思っていたより簡単

    const smoothScrollTrigger = document.getElementById("page_top_link");
    smoothScrollTrigger.addEventListener('click', function(e) {
        e.preventDefault();
        window.scrollTo({
            top: 0,
            behavior: 'smooth',
        });
    });

JavaScript+Vue.jsでの実現方法

• htmlはクリックイベント追加

    <footer id="footer">
        <p id="page-top"><a v-on:click = "page_top_click" href="#">Page Top</a></p> 
        -----省略-----    
    </footer>   

    var footer = new Vue({
        el:"#footer",
        methods:{
            page_top_click:function(e){
                e.preventDefault();
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth',
                });
            }
        }
    })