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

まずは、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/