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

      2016/05/24

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;
  });

});

 

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

megane

megane

最近、個人事業主から法人へと進化しました。 エンジニア歴13年位です。PHPとかMysqlを使ってWebシステムを構築します。 Javaも書きます。 CakePHPも使います。 サーバのチューニングもごりごりやります。 あと、お肉と自動車が好きです。Twitterとか申請どうぞ。

 - jQuery ,