Bloggerにてページ先頭にスクロールして戻るボタンを設置してみた

2017年4月5日水曜日

Bloggerにてページ先頭にスクロールして戻るボタンを設置してみた

先日、下記記事にてページ先頭に戻るボタンを設置しました。

Bloggerにてページの先頭に戻るボタンを設置してみた

今回は、以前のボタンの機能を発展させて、スクロールさせてタブメニューが表示されなくなったくらいでボタンを表示させ、ボタンを押すと、先頭までスクロールする機能を追加したバージョンについてです。

HTML

戻るボタンの設置を設置するため、下記コードを</body>の手前に追加する。

<p id="back-to-top" style="display:none;margin:0;">
<a href='#' rel='nofollow' style='position:fixed;bottom:10px;right:10px;' title='Back to Top'>
<img src='画像ファイルのURL'/>
</a>
</p>

jQuery

Googleにて用意したjQueryを読み込む

https://developers.google.com/speed/libraries/#jquery

を参考に下記のコードを<head>～</head>または</body>の手前に追加する。

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

実際のスクロール処理

下記のコードを</body>の手前に追加する。

<script>
//Back to Topボタン
$(function(){
var topBtn=$('#back-to-top');
topBtn.hide();
 
//ボタンの表示設定
$(window).scroll(function(){
  if($(this).scrollTop()>300){
    //---- 画面を300pxスクロールしたら、ボタンを表示する
    topBtn.fadeIn();
  }else{
    //---- 画面が300pxより上なら、ボタンを表示しない
    topBtn.fadeOut();
  } 
});
 
//ボタンをクリックしたら、スクロールして上に戻る
topBtn.click(function(){
  $('body,html').animate({
  scrollTop: 0},500);
  return false;
});

});
</script>

以上、参考にしていただけたら幸いです。