[ プログラミング ] jQueryを利用してスクロールするとページの戻るリンクを表示させる

最近はスクロールさせると右下にポップアップウィンドウのようなコンテンツエリアが出てくるサイトも多くなってきましたが、それの応用?で、「ページの戻るリンク」を右下に固定しておいて、スクロールすると表示する方法を紹介します。

DOMO

HTML

<div id="main">
   <p>
   はじまり<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ・・・
   ↓<br />
   ↓<br />
   ↓<br />
   おわり
   </p>
</div><!-- /#main -->
<div id="pagetop"><a href="#">▲ ページのトップへ戻る</a></div>

Java Script

// 任意の場所までスクロールするとコンテンツを表示する
$(function(){
   // スクロールすると表示するエリア
   var element = $('#pagetop');
   // スクロール量の設定
   var position = 400; // 単位:px
   // スクロールすると表示するエリアを非表示
   element.hide();
   $(window).scroll(function(){
      // スクロールすると表示させる
      if ($(this).scrollTop() > position) {
         $(element).fadeIn();
      } else {
         $(element).fadeOut();
      }
   });
});

// スムーススクロール
$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 400;// ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});

CSS

#pagetop {
   position:fixed;
   right:0;
   bottom:0;
}