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>以上、参考にしていただけたら幸いです。
0 件のコメント:
コメントを投稿