IT

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

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

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

画面を下にスクロールすると矢印のボタンが「にゅ~」っと表示されます。大まかに説明すると、アニメーション部分は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();によりボタンを非表示にさせます。

具体的に確認できるようにサンプルを作りました。

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

またボタンのアニメーションをslideDown()、slideUp()から、fadeIn()、fadeOut()に変更したサンプルも作りました。

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

ソースコードはほぼ同じなので、サンプルのソースを見てどのようになっているのか把握してください。

ABOUT ME
アバター
ドレッド
目標必達のために鬼努力を惜しまない個人事業主。フリーライターとWeb制作のお仕事をしています。立命館大学中退。放送大学教養学部の全科履修生。中小企業診断士とFP1級を目指してハードに勉強中。

COMMENT

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

CAPTCHA