jQueryでページの「トップに戻る」ボタンを実装。スクロールに応じてフェードイン・アウト[WordPress]

@Mori2ndです。最近jQueryを利用していろいろカスタマイズするのに凝ってます。

今回はスクロールに応じてフェードイン・フェードアウトして出現する、ページの「トップに戻る」ボタンをPC向けサイトに実装してみました！

スポンサードリンク

1 ページの「トップに戻る」ボタンでやりたいこと
2 jQueryを利用して実装
3 おわりに

ページの「トップに戻る」ボタンでやりたいこと

ページの「トップに戻る」ボタンを実装するにあたってやりたかったことは以下の3つ。

スクロールに応じてフェードイン・フェードアウトする。
「トップに戻る」ボタンを実行した後もURLが変わらない。
WordPress用のプラグインはなるべく使わない。

この条件で調べていたところドンピシャの記事がみつかりました。グレート！

[Я]トップに戻るボタンをjQueryでニュルッと改造する：りくまろぐ

jQueryを利用して実装

先ほどの記事を参考にしてさっそく実装です。

jQueryのファイルを読み込む

最初にjQueryを利用するためのファイルを読み込みます。こちらはGoogleAPIからの例。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

jQueryでの処理

続いてjQueryでの処理部分です。

ここでは「ボタンを表示するタイミング」と「ボタンを押してからトップに戻るまでのスクロール速度」を指定しています。

<script type="text/javascript">
$(function() {
    var topBtn = $('.backtotop');    
    //最初はボタンを隠す
    topBtn.hide();
    //スクロールが300に達したらボタンを表示させる
    $(window).scroll(function () {
        if ($(this).scrollTop() > 300) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップに戻る
    //500の数字を大きくするとスクロール速度が遅くなる
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});
</script>

$(function() {

var topBtn = $('.backtotop');

//最初はボタンを隠す

topBtn.hide();

//スクロールが300に達したらボタンを表示させる

$(window).scroll(function () {

if ($(this).scrollTop() > 300) {

topBtn.fadeIn();

} else {

topBtn.fadeOut();

}

});

//スクロールしてトップに戻る

//500の数字を大きくするとスクロール速度が遅くなる

topBtn.click(function () {

$('body,html').animate({

scrollTop: 0

}, 500);

return false;

});

</script>

解説がわかりやすかったので、自分のブログに合わせた設定も簡単でした。

「トップに戻る」ボタンを設置

最後は「トップに戻る」ボタンを設置するための記述です。

<div class="backtotop" align="center">
<a href="#header">トップに<br>戻る</a>
</div>

</div>

このボタンをクリックするとスクロールしてトップに戻るようになります。

少し解説すると「#header」がトップの場所になっていて、ここに移動するイメージですね。(利用しているテーマに合わせてご指定ください。)

やり方によってはここで指定している「#header」がURLの最後に付く場合があります。
例）https://delightmode.com/#header

しかし、ここで実装した方法だとURLが変更されないようですね。

シェアしてもらったときなど、場合によってURLが変わるのは嫌ですからね。

CSSでデザインをカスタマイズ

ボタンが設置できたので、デザインをカスタマイズしました。

参考にこのブログでの内容を書いておきます。

ボタン部分の角を丸くして、カーソルが来た場合に色を変えています。

それから、z-indexでフッターと重なったときの配置を調整しました。

.backtotop {
    position: fixed;
    right: 15px;
    bottom: 20px;
    z-index: 9000;
    display: none;
}    

.backtotop a {
    display: block;
    color: #777777;
    padding: 14px 6px;
    margin: 0;
    background-color: #DDDDDD;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
}

.backtotop a:hover {
    background: #666666;
    color: #FFFFFF;
}