最近、ブラウジング中に上に戻るためにウィンドウ右下に
ページトップへ戻る
とか
上へ
とか
上へ戻る
とか表示され、クリックすると画面がスムースにスクロールしながらページの一番最初までスクロールされるものがあります。
少し前までは、マウスのスクロールボタンがあるから、見向きもされなかったものですが、最近では、同じページをスマホでもタブレットでもPCでも閲覧できるように仕込んでいるため、マウスを使わない場合の快適環境と言うことでクローズアップされているものだと思います。
私も、頼まれて、テストページなどを作って、
こんな感じでいかがでしょうか！？
って確認しているのに、当人のページでは、未だ対応していないという恥ずかしい状況でもあります。
それでも、参考情報として、みなさまにご提供すべきものと思っていますので、スクリプトも併せてご紹介いたします。
HTMLは全て同じです。
<a href=”#” id=”page-top1″>上に戻る</a>
これ一文だけ、今作っているページのいずこかに埋め込んでください。
フェードインする方法をご紹介します。
一般的に採用される方法で、ある程度スクロールすると「上に戻る」がフェードインしてきます。
CSSは次のようになります。
#page-top{
display: block;
position: fixed;
z-index: 9999;
bottom: 10px;
right: 10px;
width: 80px;
padding: 20px 10px;
background: rgba(0,0,0,.7);
color: #fff;
text-align: center;
text-decoration: none;
}
#page-top:hover{
background: rgba(0,0,0,.8);
}
jQueryは次のようになります。
$(function(){
var pageTop = $(“#page-top”);
pageTop.hide();
pageTop.click(function () {
$(‘body, html’).animate({ scrollTop: 0 }, 500);
return false;
});
$(window).scroll(function () {
if($(this).scrollTop() >= 200) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
});
この他、回転して現れたり、下からフェードインしたり出来ます。
是非、スクリプトをいじってみてください。
コメント