jQueryとCSS3で作るページの上までスクロールするボタンって最近需要ありますね。

このエントリーをはてなブックマークに追加

最近、ブラウジング中に上に戻るためにウィンドウ右下に

ページトップへ戻る

とか

上へ

とか

上へ戻る

とか表示され、クリックすると画面がスムースにスクロールしながらページの一番最初までスクロールされるものがあります。

少し前までは、マウスのスクロールボタンがあるから、見向きもされなかったものですが、最近では、同じページをスマホでもタブレットでも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();
}
});
});

この他、回転して現れたり、下からフェードインしたり出来ます。

是非、スクリプトをいじってみてください。

コメントを残す

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