ページに上部スクロールボタンを追加する方法

公開：2019.10.05 更新：2020.05.09

こんにちは、らいどらです。

このページに辿り着いた人なら知っているかと思いますが、たまにWebページの右下らへんにあるあのボタン。押すと上に行くあのボタン。

あれをこのサイトにも付けたい！！と思ったので、今回は久しぶりの技術系記事です。

まず外見から

まずは軽く外見を整えます。

HTML

<a href="#wrap" class="topscroll"><i>上</i></a>

CSS

.topscroll {
  position: fixed;
  bottom: 50px;
  right: 50px;
  background-color: coral;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  text-align: center;
  opacity: 0.8;
}

.topscroll i {
  color: #ffffff;
  position: absolute;
  top: 10%;
  right: 35%;
}

こんな感じですかね。

補足しておくと、アンカーのリンク先の#wrapはページの最外殻のdiv要素のid属性になります。ここで指定した要素のところまでスクロールする設定になりますのでご注意ください。

iタグは参考にした記事に入っていたので書きましたが、たぶんお好みで大丈夫です。

これで外観は出来ました。

こんな感じになった。

動かす方法

さてここからが本題ですが、どうやって動かすかというところですね。

私が調べたところによると、JQueryを使うのが一般的なようです。

JQueryで出来るのであれば普通にjavascriptに書いても出来るのでしょうが……..。多分ですが長くなりそうなのでやめます。

JQueryもプラグインと一緒で、多用すると重くなりがちというのは知っていたので少々躊躇いましたが …….

参考にしている方のサイトでJQueryが使われていたので多分問題ない！という雑な判断の元、今回はJQuery方面で行きます。

詳しいことはこちらの記事が参考になりました。

他にも、chromeの検証機能を使えば参考にしたいサイトのJQueryぐらいは見れるので、それを参考にして書いても良いかもしれません。

それでは実際にやりながら解説していきます。

スクロールできるJquery

以下のコードは先に参照した記事のコードを参照しています。

ほぼ同じですが、例の記事には処理の解説が無かったので、解説を混ぜながら話していきます。

$(function() {
    var TopBtn = $('topscroll');
    TopBtn.hide();
    // スクロール位置が100でボタンを表示
    $(window).scroll(function() {
        if ($(this).scrollTop() > 700) {
            TopBtn.fadeIn(300);
        } 
        else {
            TopBtn.fadeOut(300);
        }
    });

    // ボタンを押すと上部へ移動
    TopBtn.click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 300);
        return false;
    });
});

まず、これはJqueryコードですのでJqueryを導入したことが無い方は専用の処理を追加する必要がありますのでご注意ください。

最初に出てくる.topscrollは最初に書いたアンカータグのクラス属性ですね。ボタンのクラス、IDに合わせて変えてください。

処理としては、まず変数TopBtnに.topscrollは代入。

その後は、スクロール量に応じて.hide処理で要素を隠したり、FadeIn,FadeOutで出したりしてますね。

下部の方はアンカータグのクリックイベントでスクロールが行われていますね。

return false;の辺りは私も完全には理解できてないので、気になる方は関数の返り値に関してググってみてください。

ただ、スクロール量でボタン隠すまではやらなくていいや、という人は以下のコードだけで大丈夫です。

//ボタンでスクロールのみ！
$(function() {
    var TopBtn = $('topscroll');

    TopBtn.click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 300);
        return false;
    });
});

まとめ

いかがでしたか？

Jqueryは多用するとやべーですが、こういう簡単な処理は全部任せてしまいたい……..葛藤は続きますね。

しかし、使いこなせればかなり見栄えの良いサイトが完成するでしょうから、知識は持っておきたいものですね。

それでは！