ページの右下に固定で要素を配置

まずは、HTMLを以下のように準備。このサイトの右下に出てくるボタンの要素で、WordPressで作っているので、footer.phpファイル内に記述してます。

<div id="move-to-the-top" class="move-to-the-top">
    <span class="dashicons dashicons-arrow-up-alt2"></span>
</div>

配置はCSSで対象になる要素をページの右下固定で設定します。このあたりはお好みで。

.move-to-the-top {
    background: #444444;
    border-radius: 25px;
    bottom: 20px;
    color: #ffffff;
    cursor: pointer;
    height: 50px;
    position: fixed;
    right: 20px;
    width: 50px;
    z-index: 9999;
}

.move-to-the-top span {
    align-items: center;
    display: flex;
    height: 50px;
    justify-content: center;
    width: 50px;
}

id属性の設定はJavaScriptのイベントトリガーとして使用します。

タッチイベントによるイベントトリガーの分岐

ボタンのイベントトリガーはクリックになりますが、スマートフォンなどのように画面をタッチするデバイスにはTouch event（タッチイベント）を持っています。クリックより先に動作が始まるので、クリックイベントでも動かなくはないですが一瞬遅延します。ですので、タッチイベントに対応しているデバイス（ブラウザ）であればタッチイベントをイベントトリガーにし、そうでなければクリックイベントで実装します。

;(function($) {
    "use strict";
    $(function() {
        var
            event = "ontouchend" in window ? "touchend" : "click",
            elmMove = $("#move-to-the-top");
    });
})(jQuery);

id属性を指定したターゲット要素を変数に保持しておきます。

ページのトップまでスクロール移動させる

要素がクリック（タップ）されたらjQueryのanimateを使用して、ページのトップまでスクロールを移動させます。以下の通り（8〜11行目）イベントを追加しました。

;(function($) {
    "use strict";
    $(function() {
        var
            event = "ontouchend" in window ? "touchend" : "click",
            elmMove = $("#move-to-the-top");

        elmMove.on(event, function(e) {
            e.preventDefault();
            $('html, body').animate({scrollTop: 0}, 500);
        });
    });
})(jQuery);

9行目：クリック（タッチ）イベントに対して、preventDefaultを実行しています。もし対象がa要素やbutton要素だったりした場合、イベントが発火してしまうのでイベントをキャンセルさせます。（特にa要素はhref属性の指定先に遷移してしまいます）

10行目：ページのスクロール値（この場合、縦スクロール値）を持っているhtml要素とbody要素のスクロールの値を0（トップ）に500ミリ秒で戻す処理を書いています。これでクリック（タップ）すれば、500ミリ秒でページのトップまで移動してくれます。

プラグイン化してスクロールのスピードを自由に

jQueryプラグインの作り方をベースにこの処理をプラグイン化。

;(function($){
    $.fn.topMove = function(options){
        var defaults = {
            "speed": 500
        };
        var
            settings = $.extend( {}, defaults, options ),
            event = "ontouchend" in window ? "touchend" : "click";

        return this.each(function(){
            $(this).on(event, function(e) {
                e.preventDefault();
                $('html, body').animate({scrollTop: 0}, settings.speed);
            });
        });
    };
}(jQuery));

デフォルト値としてspeedパラメータを500（ミリ秒）に設定しておきます。これをHTMLファイル側で引数を渡してコールします。

$(function(){
  $("#move-to-the-top").topMove({speed: 1000});
});

できた！＼(^o^)／完成〜！

アレンジ：スクロールが一定の位置まで移動したら表示

とりあえず完成したのですが、少々アレンジを。右下固定で表示しているのですが、ずっと出たままになっているのでスクロールの位置がある程度下がったら表示するようにしてみます。

;(function($){
    $.fn.topMove = function(options){
        var defaults = {
            "speed"  : 500,
            "scroll" : 300
        };
        var
            settings = $.extend( {}, defaults, options ),
            event = "ontouchend" in window ? "touchend" : "click";

        return this.each(function(){
            var self = $(this);
            self.hide();

            self.on(event, function(e) {
                e.preventDefault();
                $('html, body').animate({scrollTop: 0}, settings.speed);
            });

            $(window).on('scroll', function () {
                if ($(this).scrollTop() > settings.scroll) {
                    self.not(":animated").fadeIn();
                } else {
                    self.not(":animated").fadeOut();
                }
            });
        });
    };
}(jQuery));
  • 5行目 – scrollがどこまで下がったら表示するかの初期値（300px）
  • 13行目 – 要素を最初は非表示にしておく
  • 20〜26行目 – windowのscrollイベントトリガーで、スクロール位置がパラメータの値を越えたらfadeInするように設定

アレンジ完成！＼(^o^)／
パラメータを増やしてフェードのスピードだったり、アニメーションの種類だったり、色々増やしてみても良いかも。

GitHub
※[jquery.topMove.js]フォルダに今回の記事のソースコードが入っています。

参考サイト

HTML5ROCKS: マルチタッチ ウェブ開発
https://www.html5rocks.com/ja/mobile/touch/