2016年6月1日水曜日

【jQuery】『トップへ』ボタンの設置方法

ブログやHPには欠かせない、『トップへ』ボタンですが、簡単に搭載できるので、参考にしてみてください。

HTMLには、次のように記述します。

<!-- scroll up buton -->

<div id="backToTop">トップへ</div>


記述する場所はどこでも構いません。

次に、javascriptの記述です。今回は、jQueryを使っているので、headタグ内でjQueryを読み込ませておいて下さい。

やり方が分からない方は、Google CDN を使うのが便利です。

headタグ内に、

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

を追加しておけば、OKです。

次に、javascript(jQuery)を書いていきます。
HTML内に記述してもいいですし、外部ファイルに記述して、CSSのようにheadタグ内で読み込むこともできます。

javascript
<script>

// ボタンの表示に関する設定

$(function() {

 var top = $("#backToTop");

 top.hide();



 $(window).scroll(function() {

  if ($(this).scrollTop() > 100) {

   top.fadeIn();

  } else {

   top.fadeOut();

  }

 });



// ボタンを押したときの挙動

 top.click(function() {

  $("html, body").animate({scrollTop: 0}, "normal");

  return false;

 });

});

</script>



次に『トップへ』ボタンのCSSを記述していきます。
これもjavascriptと同様に、HTML内でも、外部ファイルの読み込みでも構いません。
外部ファイルにまとめて記述しておいたほうが便利です。

CSSは、Z-indexなどで他の要素が上に重なることがあるので、なるべくCSSファイルの最後の方に記述す良いと思います。

CSS
#backToTop {

  display: block;

  width: 100px;

  height: 100px;

  position: fixed;

  bottom: 20px;

  right: 20px;

  padding: 30px 0px 0px 0px;

  font-family: 'Oswald', sans-serif;

  font-size: 20px;

  color: rgba(255, 255, 255, 0.7);

  background-color: rgba(0, 0, 0, 0.5);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 50%;

  text-align: center;

}



#backToTop:hover {

  background-color: rgba(255, 100, 100, 0.7);

  color: white;

}

このサンプルでは、丸くしましたが、デザインはお好みで変えて下さい。

HTH.

0 件のコメント:

コメントを投稿