• このエントリーをはてなブックマークに追加

スルスル~っとスクロールするページのトップへ戻るボタンを最近見かけたことってないですか?
jQueryを使えば簡単に実現することができます。

自分で記述する方法

下記のように記述すれば、するするーは実現できる。

$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 200;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

スムーススクロールのライブラリを使う方法

  1. jQueryのサイトに行って、Javascriptのファイルをダウンロードします。改行のついたソースコードと、動作の速さを求めた改行なしの軽いソールの2種類があります。どちらか選んで、jquery.jsとでも名前をつけて保存。
  2. scrolltopcontrol.jsにアクセスして、ソースを全てコピーしてscrolltopcontrol.jsとでも名前をつけて保存します。
  3. 上記2つのファイルを読み込むスクリプトタグを<head>の中に入れます。
  4. 保存した、scrolltopcontrol.jsを編集します。12行目にpngファイルを読む記述があります。そのパスに画像を設置するだけでも動くようになります。controlHTML: ''の”中を自由に変更することも可能です。また、空でもいいです。
    空にした場合は、私のサイトを例にすると、anchorkeyword: '#backtop-header'
    というような記述があります。’#アンカー’を正しく設定したい位置に設定すると、簡単に実現できます。

ヘッダーを固定しているとずれる

ヘッダーを固定しているとアンカー位置がずれてしまう。ずれるので、ヘッダーの固定している分の高さを取得して、安価の位置をそのぶんずらしておく必要がある。

他の選択肢

そもそも、このスムーズスクロール自体をやらないほうが良いという選択肢もある。なぜかというと、動かしている間鬱陶しいと感じる人もいるから。さっとアンカー位置に飛ぶようにするにはこういった機能をつけないほうが良いかも。jQueryのセット・設置も面倒なので、やらないほうが良いというのもいい選択肢の一つではある。