クリックするとスルスルッと上昇する「ページトップへ」ボタンを設置する方法

クリックするとスルスルッと上昇する「ページトップへ」ボタンを設置する方法

クリックするとスルスルッと上昇する「ページトップへ」ボタンを設置する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • Youtube動画変換・ダウンロードおk!
  • このエントリーをはてなブックマークに追加

jQueryを使って、スルスルッと上昇する「ページトップへ」ボタンを設置する方法を紹介したいと思います。

簡単なデモページも用意したので、ぜひクリックして動きを確認してみてください。

デモページを見る

デモページでは、最下部と一定量スクロールすると画面右下に、ページトップへボタンを設置しています。

スポンサードリンク

スルスルッと上昇する「ページトップへ」ボタンを設置する方法

最もシンプルな方法は、デモページの最下部に設置している「ページトップへ」のように、テキストリンクを設置する方法です。

まずは、jQueryとスクリプトをロードします。これは</body>の直前に記述すればOKです。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {
var topBtn = $('#pagetop');
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 1000);
return false;
});
});
</script>

8行目にある「1000」の数字を変えることで、上昇するスピードを変更することができます。値が少ないほど早くなります。

続いて、「ページトップへ」用のテキストリンクを設置します。

<a href="#top" id="pagetop">ページトップへ</a>

a要素のIDは、上記スクリプト内の「var topBtn = $(‘#pagetop’);」と合わせます。

今回はテキストリンクにしていますが、画像リンクにすることも可能です。とにかくリンクのIDさえ合わせれば動きます。

スクロールするとボタンが現れるようにする

よく見かけるのは、このパターンですね。一定量スクロールすると、ボタンが現れるようにします。

まずは、例によってjQueryとスクリプトをロードします。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var pagetop = $('.pagetop');
$(window).scroll(function () {
if ($(this).scrollTop() > 600) {
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 1000);
return false;
});
});
</script>

6行目でボタンが表示されるまでの距離を指定しています。スクロールの速度については、先ほどと同様に13行目の値で調整します。

続いて、ボタン用のHTMLを記述します。今回はクラスにしています。上記スクリプトの4行目と合わせてください。

<p class="pagetop"><a href="#top" class="pagetop">↑</a></p>

CSSは以下のような感じで、右下に固定で表示されるようにしています。

.pagetop {
display: none;
position: fixed;
right: 60px;
bottom: 30px;
}
.pagetop a {
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #333;
text-align: center;
color: #fff;
font-size: 26px;
text-decoration: none;
}

こちらの方が、見た目的にも使い勝手もいいかもしれませんね。

あとがき

今回は、2種類の「ページトップへ」ボタンの設置方法を紹介させていただきました。どちらの方法で実装するかは、好みやサイトの雰囲気にもよると思います。

「ページトップへ」ボタンは、単純にリンク先を#topなど、ページ上部のIDに飛ばすようにすれば実装できますが、ちょっとした動きがあった方がわかりやすいですね。

「ページトップへ」に一手間加えたい時は、ぜひ参考にしてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。