zukucode
主にWEB関連の情報を技術メモとして発信しています。

JavaScript ページの先頭までアニメーションスクロールをする

ブログやホームページでよくある、クリックするとページの先頭(TOP)にスクロールするボタンを実装します。

JQueryを使用したサンプルが多いですが、ここではJQueryは使わずに実装します。

bodyscrollTopを取得する方法がブラウザによって異なるので、アクセスされたブラウザで処理を分岐しています。

// to: スクロール先のy座標(ページの先頭の場合は0をセット)
// duration: スクロールする時間
function scrollTo (to, duration) {
  var element;
  if ('scrollingElement' in document) {
    element = document.scrollingElement;
  } else if (navigator.userAgent.toLowerCase().match(/webkit|msie 5/)) {
    element = document.body;
  } else {
    element = document.documentElement;
  }
  if (duration <= 0) return;
  var difference = to - element.scrollTop;
  var perTick = difference / duration * 10;

  setTimeout(function () {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop === to) return;
    scrollTo(to, duration - 10); // 再帰で実行
  }, 10);
}

window.addEventListener('load', function () {
  // ボタンなどの要素のクリックイベントに作成したイベントを設定
  document.getElementById('button').addEventListener('click', function () { scrollTo(0, 600); });
});

作成したファンクションをボタンのクリックイベントに設定する処理について、IE8以下に対応する場合はattachEventの処理も追加する必要があります。詳しくはJavaScript イベントを設定・追加する方法で紹介しています。

最新のChromeで動作しないとき

Chromeのバージョンが61以上の場合は今までのようにdocument.bodyでは正しく取得できないようです。

最近の新しいブラウザであればdocument.scrollingElementが使えるので、これに対応しているブラウザであればdocument.scrollingElementを使用するようにします。


関連記事

  • stylelintで例外(無視)するタグを指定する

    cssで構文チェックを行うstylelintで任意のタグを無視してエラーとしない方法を紹介します。以下のようにruleのignoreTypesで無視するタグを指定します。以下の例ではamp htmlの...


  • JavaScript cookieが有効か判定する

    JavaScriptでcookie(クッキー)が有効か判定をします。navigator.cookieEnabledで簡単に判定できます。


  • JavaScript イベントを設定・追加する方法

    JavaScriptでロードイベントやクリックイベントなどのイベントを設定する方法を紹介します。htmlのボタンなどの要素の属性にonclickやonchangeなどのイベントを直接記載する方法です。...


  • JavaScript オブジェクト配列の要素で最大値を取得する

    今回はオブジェクトの配列の場合に要素の最大値・最小値を取得します。オブジェクトの配列があったときに、最大値または最小値を取得します。SQLのGROUP BYで集計するイメージです。第2引数で配列を指定...


  • JavaScript ¥(円マーク)を文字列で扱う

    JavaScriptの¥(円マーク)は、正しく設定していないと利用者のPCのOSなどの環境によっては\(バックスラッシュ)で表示されてしまう可能性があるので、扱いには注意が必要です。JavaS...


  • JavaScript ブラウザがlocalstorageに対応しているか判定する

    ブラウザがlocalstorageに対応しているか判定します。専用のファンクションは用意されていないので、try-catch内の処理で実際にlocalstorageにアクセスしてみて、エラーになれば対...


  • JavaScript 文字列を途中で改行する

    JavaScriptで文字列を途中で改行します。主にalertやconfirmのメッセージで使用します。ブラウザに表示する場合は改行コードをbrタグに置換する必要があります。文字列を改行するには以下の...


  • JavaScript 改行コードなどの特殊文字を文字列として扱う

    改行コードやダブルクォーテーション、シングルクォーテーションなどの特殊文字を文字列として扱うためにはエスケープをする必要があります。特殊文字は基本的には特殊文字の前にバックスラッシュ(`\`)をつける...


  • JavaScript 文字列の長さ(バイト数)を取得する

    JavaScriptで文字列の長さを取得します。バイト数で計算したい場合は以下のようにします。Shift_JISで単純に半角1バイト全角2バイトで計算したい場合は以下のようにします。Shift_JIS...


  • JavaScript 文字列を連結する

    JavaScriptで文字列を連結します。JavaScriptでは文字列の連結は文字列同士を+で結合できます。例えば以下のように、数値同士を+演算子で計算すると足し算が行われてしまうので注意します。上...