閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。
よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。

  • 紹介している方法はいずれもjQueryを使用しており、サンプルによってはjQuery Easingも使用しているので予め読み込ませてください。
  • jQueryの記述はいずれもセレクタにa要素を指定しているため、特定の要素にのみ適用させたい場合などはidやclassを用いるなどして指定してください。

使用するHTML・デモ

サンプルで使用しているHTMLは下記のようなa要素のhrefには#を記述したシンプルなものになっています。

<a href="#">PAGE TOP</a>

また、それぞれの実際の動きは以下で確認でき、ページ下部にそれぞれ紹介している動きのボタンが配置されているので、ボタンをクリックして動きを確認してみてください。

単純なスムーススクロール

一番よく見かけることがあると思う単純なスムーススクロールで、jQueryを下記のように記述します。
スクロール時のスピードを変えたいときは、ハイライト行で800と記述している部分を任意の数値へ変更してください。

jQuery
$(function() {
  $('a').on('click', function(e) {
    e.preventDefault();
    $('html, body').stop().animate({
      scrollTop: 0
    }, 800);  });
});

スムーススクロール＋jQuery Easing

先ほどのスムーススクロールの動きにイージングを組み合わせたもので、jQuery Easingも読み込んでいる状態で下記のように記述します。
今回のサンプルではゆっくり動き出して徐々にスピードアップしていくような動きになるeaseInQuintを指定しています。

jQuery
$(function() {
  $('a').on('click', function(e) {
    e.preventDefault();
    $('html, body').stop().animate({
      scrollTop: 0
    }, 800, 'easeInQuint');  });
});

スクロール時のスピードを変えたいときは、ハイライト行で800と記述している部分を任意の数値へ変更し、イージングの動きはハイライト行でeaseInQuintと記述している部分を任意のものに変更してください。
その他の動きにしたいというときは、以下で様々な動きを確認することができます。

いきなりページの先頭近くに

文章だと伝わりづらいと思うので実際の動きを見てもらいたいのですが、ページ内リンクをクリックするとほぼページの先頭部分へアニメーションなしで移動し、その後少しだけイージングを用いたスムーススクロールの動きがついてページの先頭にいくというものです。
実装にはjQuery Easingも読み込んでいる状態で下記のように記述します。

jQuery
$(function() {
  $('a').on('click', function(e) {
    e.preventDefault();
    $('html, body').scrollTop(800).stop().animate({      scrollTop: 0
    }, 800, 'easeOutExpo');  });
});

4行目のハイライト行にある.scrollTop()の部分で記述している数値はアニメーションなしで移動する場所の指定で、スムーススクロール時のスピードやイージングを指定する部分が6行目のハイライト行となります。

点滅してページの先頭に

こちらはこれまでのものとは違ってスムーススクロールは使用せずにページの先頭へ移動するもので、その際にopacityを使うことによってページが一瞬点滅していくエフェクトを加えたものです。
実装にはjQueryを下記のように記述します。

jQuery
$(function() {
  $('a').on('click', function(e) {
    e.preventDefault();
    $('html, body').css('opacity', '0').scrollTop(0).animate({
      opacity: 1
    }, 800);
  });
});

まずページ内リンクをクリックした際にopacity: 0でコンテンツが見えなくなっている間にページの先頭へ移動させ、その後再びopacityを使ってコンテンツを表示させることで一瞬点滅するとページの先頭に戻っているという動きを実装できます。

人によっては「何が起きたかわからない（わかりにくい）」といった意見もあるとは思いますが、個人的には面白い見せ方で覚えておきたいなと思いました。

スクロール＋フェードアウト/フェードイン

こちらもスムーススクロールの動きにopacityを組み合わせたもので、まずページ内リンクをクリックすると上にスクロールしながらコンテンツが消えていき、ページの先頭近くになるとまたコンテンツが表示されていくという動きになります。
実装にはjQueryを下記のように記述します。

jQuery
$(function() {
  $('a').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: 600,
      opacity: 0
    }, 400, function() {
      $('html, body').animate({
        opacity: 1,
        scrollTop: 0
      }, 400);
    });
  });
});