Webサイトには、ページ下部にトップに戻るボタンなどがよく設置されていて、ボタンをクリックするとページ上部までスムーススクロールしながら戻るようになっています。
そのようなトップに戻るボタンの実装方法を紹介します。
See the Pen
topreturn by KUBO (@KUBOGEN)
on CodePen.
jQueryのanimate関数を使う
上の例では、jQueryのanimate関数を使って、スムーススクロールのトップに戻るボタンを実装しています。
HTML
<p>スクロールしてください。<br/>
下の方にトップに戻るボタンがあります。</p>
<p>スクロールしてください。<br/>
下の方にトップに戻るボタンがあります。</p>
<a href=”” class=”top-return”>トップに戻る▲</a>
まず、トップに戻るボタンのaタグにクラスを付けます。今回の場合だと「top-return」というクラス名。
次にjQueryですが、さっき付けたクラス名「top-return」の要素がクリックされたら、animate関数の処理がされるようにします。
jQuery
$(function(){
$(‘.top-return’).click(function(){
$(‘body,html’).animate({
scrollTop: 0
}, 1000);
return false;
});
});
$(function(){
$(‘.top-return’).click(function(){
$(‘body,html’).animate({
scrollTop: 0
}, 1000);
return false;
});
});
animate関数の処理内容は上記の通り。「body,html」に対してブラウザのスクロール位置を取得する「scrollTopメソッド」で0の値を指定してやることで、ページ最上部までスクロールしながら戻るような動きが実装できます。
また、そのあとに指定している「1000」という値はスクロールする時間です。単位はms(ミリ秒)なので、1秒かけてスクロールしながら戻るという意味です。
もっと速くスクロールさせるなら500とか300を指定するといいと思います。
Leave a Comment