jQueryで【ページの先頭に戻るボタン】を配置するサンプル

よくウェブサイトなどの一番下の部分に【先頭へ戻る】と言ったボタンやリンクが有ると思います。この先頭に戻るサンプルスクリプトを書きました。実際にこのコピペチェックツールで利用しています。ある程度スクロールすると【先頭へ戻る】ボタンが右下に表示され、ボタンを押すと上にアニメーションしながらなめらかに戻ります。

ここでは、そのサンプルを紹介します。

■サンプル

HTMLとCSSとJQueryのスクリプトの3つで構成されています。

・HTML

こんな感じのHTMLを書きます。結局CSSで位置固定するので、どこでもOKです。

<p id="page-top">
    <a href="#">先頭へ戻る</a>
</p>

・CSS

こんな感じのCSSを書きます。ページの右下に、四角い枠を固定するCSSになっています。

#page-top {
    position: fixed;
    bottom: 50px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 15px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}

・スクリプト

最後にスクリプトを書きます。以下の様なサンプルになります。スクロールして、位置が100を超えたら、ボタンがふんわり表示されるようになっています。ボタンを押した時に、上に戻るのですが、これもアニメーションをつけています。

$(document).ready(function(){

  var topBtn = $('#page-top');
  topBtn.hide();
  //スクロールが100に達したらボタン表示
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
      topBtn.fadeIn();
    } else {
      topBtn.fadeOut();
    }
  });
  //スクロールしてトップ
  topBtn.click(function () {
    $('body,html').animate({
      scrollTop: 0
    }, 500);
    return false;
  });

});

比較的簡単に【ある程度スクロールしたら上に戻るボタン】表示、【上に戻るときはアニメーション】を実装することができます。参考にしてみてください。では。