2020/03/03

ページトップへ戻るボタンといろいろな機能の追加

ページのトップへ戻るボタンにいろいろな機能を追加する記述例を紹介します。
初めはボタンの表示位置を固定しただけの状態からjQueryを使って徐々に機能を追加していきます。
下にスクロールしてトップに戻るボタンを押してみてください。
（※今回紹介した記述例ではjQueryを利用していますので、htmlファイルにjQueryの読み込みが必要です。jQueryの読み込みについて詳しくは下記の記事で紹介していますので、よかったら見てみてください。）

固定された位置にボタンを表示する

ページトップへ戻るボタンをページ内の一定の位置に表示させています。

See the Pen
dyoRRVg by saku (@web-saku)
on CodePen.

するするとスクロールしてトップに戻るようにする

ページトップへ戻るボタンを押した時にスクロールしてページのトップに戻っているのがわかるようにしたい時は、下の例のように記述することでゆっくりとページのトップへ戻るようにすることができます。

See the Pen
rNVwwGz by saku (@web-saku)
on CodePen.

追加したスクリプト

<script>
$('a[href^="#"]').click(function () {
        var href = $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $("html, body").animate({
            scrollTop: position
        }, 700, "swing");  //700msかけてスクロールする
        return false;
    });
</script>

下にスクロールした時だけボタンが表示されるようにする

ページトップへ戻るボタンを初めは表示させず、下に少しスクロールしてから表示させるようにしたい時は、下の例のような記述をすることでボタンの表示/非表示を切り替えることができます。

See the Pen
oNXwwPQ by saku (@web-saku)
on CodePen.

追加したスクリプト

<script>
$(function () {
    var $pageTop = $(".pagetop-btn")
    $pageTop.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {  //100pxスクロールしたら表示させる
            $pageTop.fadeIn();
        } else {
            $pageTop.fadeOut();
        }
        })                  
        });
</script>

下までスクロールしたときにボタンがフッターと重ならないようにする

ページトップへ戻るボタンがフッターと重ならないようにしたいときは、下の例のような記述をすることでボタンとフッターが重なる時だけボタンの位置を変えてあげると、ボタンがフッターと重なるのを防ぐことができます。

See the Pen
bGdRRxE by saku (@web-saku)
on CodePen.

追加したスクリプト


$(window).scroll(function () {
	scrollHeight = $(document).height();  
        scrollPosition = $(window).height() + $(window).scrollTop();  
        footHeight = $("footer").innerHeight(); 
        if ( scrollHeight - scrollPosition  <= footHeight ) { 
            $(".pagetop-btn").css({
                "bottom": footHeight + 20 //footerの高さにボタンがかかる時はfooterの高さ+20px上にあげる
            });
        } else { 
            $(".pagetop-btn").css({
                "position":"fixed",
                "bottom": "30px" //footerの高さにボタンがかからない時は下から30pxの位置に固定する
            });
        }
});