ページトップへ戻るボタンをスクロールしてからふわっと表示するjQuery

  • あとで読みたい人は…

こんにちは、@cappeeです。

最近ページトップへ戻るボタンを一工夫するサイトが増えましたね。

よく見かけて一番サイトの閲覧に影響がなく個人的に好きなのが、スクロールしてからふわっと表示するフェードがついているボタンです。

jQueryを使えば簡単に実装することができます。

サンプルコード

HTML

<p class="pageTop"><a href="#wrapper"><img src="/images/pagetop.png" width="60" height="60" alt="ページの先頭へ"></a></p>

CSS

#pageTop {
 position: fixed;
 bottom: 50px;
 right: 50px;
 }

Script

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

 

こちらには上記以外の使えるアニメーションがたくさんありますのでぜひご覧ください。

jQueryでスクロールすると表示する系いろいろ

Pocket
article clipper ページトップへ戻るボタンをスクロールしてからふわっと表示するjQuery

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>