fbpx

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();
}
});
});

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

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

関連記事

コメント

この記事へのコメントはありません。

最近の記事

  1. スマイルゼミは紙のように書いて学べるタブレット型通信教育サービス!料金や口コミを徹底調査!

  2. 初めてのブログをWordPressで!しかも無料ですぐに使える!

  3. 電話占いで復縁や恋愛相談をするなら口コミで選ぶ!話題の電話占いヴェルニ!を実際に体験してみた!【初回無料】

TOP