[JavaScript] jQuery を使わずにスクロールでトップに戻るボタンを表示する

Jan 09, 2014JavaScript

ページを下にスクロールすると右下に「トップに戻る」ボタンが表示され、タップするとページ上部に戻るあれを JavaScript で書いてみました。

jQuery で実装されているのはそこらへんに転がっていますが、jQuery は勉強してないから分からないし、ライブラリ（100KB 程度）を読み込むリクエストが発生するからという理由で JavaScript だけで書いてみました。

ここからは、実装する上で使用したコードを解説していきます。

JavaScript：ページ上部にスクロールする

ページ上部にスクロールする JavaScript です。参考ページのコードをそのまま使用させて頂きました。

function scrollToTop() {
  var x1 = x2 = x3 = 0;
  var y1 = y2 = y3 = 0;
  if (document.documentElement) {
    x1 = document.documentElement.scrollLeft || 0;
    y1 = document.documentElement.scrollTop || 0;
  }
  if (document.body) {
    x2 = document.body.scrollLeft || 0;
    y2 = document.body.scrollTop || 0;
  }
  x3 = window.scrollX || 0;
  y3 = window.scrollY || 0;
  var x = Math.max(x1, Math.max(x2, x3));
  var y = Math.max(y1, Math.max(y2, y3));
  window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
  if (x > 0 || y > 0) {
    window.setTimeout("scrollToTop()", 30);
  }
}

この関数を a タグの onclick から呼び出します。

<a href="" onclick="scrollToTop(); return false">トップに戻る</a>

JavaScript：現在のページ位置に応じてボタンを表示／非表示する

要素のスクロール時に処理を行うように onscroll を使用します。onscroll に指定した関数の中で現在の位置と、全体の位置を計算しています。

スクロール位置が全体の 10% 以上にある場合は、トップに戻るボタンに割り当てた、ボタンを非表示にするクラス scroll-to-top-not-display を取り除く処理を走らせています。

var element = null;
window.onscroll = function() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    if (element == null) {
      element = document.getElementById('scroll-to-top');
    }
    if (scrollTop / scrollHeight > 0.1) {
      element.classList.remove('scroll-to-top-not-display');
    } else {
      element.classList.add('scroll-to-top-not-display');
    }
}

また、ページを読み込んだ時点ではボタンを表示させないように、scroll-to-top-not-displayed クラスは最初から記述します。

<a href="" onclick="scrollToTop(); return false" id="scroll-to-top" class="scroll-to-top-not-display">トップに戻る</a>

CSS：常に前面にボタンを表示させる

position を固定 fixed し、位置を指定 bottom, right し、z-index を最大値 2147483647 に設定します。そうすれば、スクロールしても位置が変わらないボタンが作成出来ます。

#scroll-to-top {
  position: fixed;
  z-index: 2147483647;
  bottom: 20px;
  right: 20px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 12px;
  font-family: sans-serif;
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 2px;
}

http://disqus.com/?ref_noscript