JavaScript

ウィンドウを下にスクロールしたときにトップへ戻るボタンを表示させるjQueryのコード

記事内に商品プロモーションを含む場合があります

少し前からですが、画面を下にスクロールした時にトップへ戻るボタンが表示されるようなブログが増えてきました。私のブログでも例にもれずに簡単なアニメーションするボタンを自前で実装しました。今回のエントリーではその「アニメーションするトップへ戻るボタン」の作り方を紹介します。

↓このブログではこんな感じです。

画面を下にスクロールすると矢印のボタンが「にゅ~」っと表示されます。大まかに説明すると、アニメーション部分はjQuery、ボタンのレイアウト、配置はCSSでやっています。まずはボタンを実装したいページにjQueryの本体を読み込みます。

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

まぁjQueryのバージョンは何でもいいと思いますが、できれば最新の物を使いましょう。
それでHTMLのソースコードはこんな感じにします。

<div id="container">
<div id="header">
ここはヘッダー
</div>
<div id="main">
メインコンテンツ
</div>
<div id="footer">
ここはフッター
<p id="toTop"><img src="btn_toTop.png" /></p>
</div>
</div>

bodyタグ内のみを記述。

フッターの

<p id="toTop"><img src="btn_toTop.png" />

が表示させたいトップへ戻るボタンの画像です。

ページのCSSは以下のように。

* {
  margin:0;
  padding:0; 
}
body {
  background-color:#AFAFAF;
}
#header,
#main,
#footer {
  width:900px;
  margin:0 auto;
}
#header {
  height:300px;
  background-color:#FEFFDF; 
}
#main {
  height:800px;
  background-color:#CCF7C4;
}
#footer {
  height:300px;
  background-color:#D3F9FE;
}
#footer p#toTop {
  position:fixed;
  bottom:0px;
  left:50%;
  margin-left:450px;
  cursor:pointer;
}

CSSでのポイントはまずp#toTopをposition:fixed;とbottom:0px;でウィンドウの下部に固定してしまいます。
left:50%で画像の位置をウィンドウの中央に寄せ、さらにmargin-left:450px;でさらに右の方へ移動させます。450px;の部分はレイアウトに合わせて数値を変更させたらいいでしょう・・・

さて、jQueryのコードですが、以下のようにしました。

<script>
  jQuery(function($) {
    var topBtn = jQuery('#toTop'); 
    topBtn.hide();
    jQuery(window).scroll(function () {
      if (jQuery(this).scrollTop() > 100) {
        topBtn.slideDown();
      } else {
        topBtn.slideUp();
      }
    });
    topBtn.click(function () {
      jQuery('body,html').animate({
      scrollTop: 0
      }, 500);
      return false;
    });
  });
</script>

ポイントはどれくらいスクロールしたときにボタンを表示させるのか? という点と、ボタンをクリックしたときにどれくらいの速さでトップへスクロールさせるのかという点です。また、「topBtn.hide();」で初期状態ではボタンを非表示にしています。

この例では「scrollTop() > 100」の部分で100という数値を設定しています。この100という数値分下へスクロールした場合、ボタンがslideDown()によって表示されます。スクロール位置が100以下になった場合はslideUp();によりボタンを非表示にさせます。

===

コレカラウェブではWebライティングのお仕事を承っております。豊富な実務経験や国家資格を生かして、SEOに強い完全オリジナルな文章を作成いたします。公式noteにてポートフォリオを掲載していますので、こちらも併せてご覧ください。ご相談・ご依頼はお問い合わせページからお願いいたします!

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
らぐち
コレカラブログ管理人のらぐちです。コレカラウェブという屋号でフリーランスとして、Webライティング・SEOコンサルティング・メディア運営・障害者支援のお仕事を一貫して承ってきました。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA