jQuery:トップに戻るスムーズスクロール実装サンプル

今回は、jQueryでトップに戻るスムーズスクロール実装サンプルについて、サンプルコードを交え記載してみたいと思います。

よく見かけるページ下部にあるうえ向きの矢印をクリックすると、ページの先頭へスルッとアニメーションしながらトップに戻る、スムーズにスクロールする作り方をサンプルを用いて記載してみます。スムーズスクロールは多くのサイトで見かけるUIですが、jQuery初心者の方でも非常に簡単に実装することが可能です。

という事で、それでは今回はッ、

・jQueryでトップに戻るスムーズスクロールの仕組み
・トップに戻るスムーズスクロールのHTMLとCSS
・トップに戻るスムーズスクロールのjQuery
・jQuery独自のプロパティ操作

上記について記載していこうと思います…。

jQueryでトップに戻るスムーズスクロールの仕組み

まずはサンプルから、前回のjQueryで画像とキャプションの表現方法サンプルに、トップに戻るスムーズスクロールを付け加えてみました。

サンプルdemoページ

トップへ戻るスムーズスクロールを実行するボタンは、サンプルページの一番下に配置しています。つまり、このボタンがクリックされた時点でウィンドウはある程度下方向にスクロールしていることになります。ボタンがクリックされたらこのスクロール量を「0」にするという処理を実行することになります。

このとき、いきなり「0」にしたのでは画面の最上部まで一瞬で戻ってしまうので、その時点でのスクロール量をもとにして徐々に「0」に近づけていくようにします。この動きを実装するにはjQueryのアニメーション機能を利用します。

トップに戻るスムーズスクロールのHTMLとCSS

トップに戻るスムーズスクロールのHTMLとCSS以下に記述します。とてもシンプルなコードになります。

サンプルHTML<button type=”button” class=”back-to-top”>
<span class=”label”>ページの先頭へ戻る</span>
</button>

サンプルCSS

.back-to-top {

background-color: rgb(240, 240, 240);

border-width: 0;

cursor: pointer;

display: block;

margin: 0;

padding: 16px;

width: 100%;

}

.back-to-top .label {

display: block;

height: 18px;

margin:auto;

overflow: hidden;

width: 26px;

}

.back-to-top .label:before {

content: url(images/sprites.png);

display: inline-block;

font-size: 0;

line-height: 0;

}

.no-js .back-to-top {

display: none;——①

}

このようにbutton要素を利用して、ここにjQueryで動作を割り当てていきます。このボタンはJavaScriptが無効な場合はクリックしても何も起こらないでの、その場合はCSSで非表示にしています①。

トップに戻るスムーズスクロールのjQuery

それでは、jQueryのコードを記載してみます。

■トップに戻るスムーズスクロールのjQuery

$(function(){
$(‘.back-to-top’).click(function () {
$(‘body,html’).animate({
scrollTop: 0
}, 400);
return false;
});
});

click()メソッドと、scrollTop()メソッドを利用して、とてもシンプルな記述になります。また、トップに戻る時間は400ミリ秒を指定しています。

jQuery独自のプロパティ操作

scrollTopは「スクロールバーの上下の位置」、scrollLeftは「スクロールバーの左右の位置」を指定するプロパティです。つまり、これらのプロパティを操作することで、スクロール量を指定することができます。

ここではscrollTop:0を指定しているので、スクロールバーの「上下0の位置」、つまりページの先頭へスクロールすることになります。
このscrollTopプロパティですが、1つ注意すべき点があります。ページのスクロールを操作する場合、scrollTopプロパティを利用できる要素が、ブラウザによって「html」の場合と、「body」の場合があり、そのため、今回は$(‘body,html’)で両方を指定しています。この$(‘body,html’)をanimate()メソッドでアニメーションさせています。

なお、先ほども少しふれましたが、animate()メソッドの2つめの引数は「アニメーションにかかる所要時間」です。アニメーションはこの数値が小さいほど早く、大きいほどゆっくりになります。数値の単位はms（ミリ秒）になり、ここでは400を指定しているので、0.4秒かけてページのトップに戻ることになります。

といことで今回は、jQuery:トップに戻るスムーズスクロール実装サンプルにつきまして、実際にサンプルコードを用いて、詳しく記載しました。

シンプルで簡単だったことと思います。しかしながら、ページ上に実装されているのといないのでは、特にPCでの操作の場合、断然に実装されているほうが、操作性が良いことと思います。また、サンプルではページの<head>内で記述していますが、個人的には最下位部の</body>タグの直前に記述することをおすすめいたします。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。