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. 【SEO向上】Webサイト表示におけるSEO(検索エンジン最適化)のための最適化処理を、ワンクリックで適用できる「XPageSpeed(エックスページスピード)」機能が大幅アップデート!

  2. 【作業効率改善】在宅勤務や外注スタッフのパソコンの画面を定期的に自動キャプチャして管理者に送信する自動監視ツール「F-Chair+(エフチェアプラス)」

  3. 【無料】全国7400以上の図書館からリアルタイムで蔵書・貸し出し状況が検索できる「カーリル」あなたの図書館に蔵書があるかな?

TOP