jQueryを使ってサイトの一番上にスクロールする

jQueryを使ってサイトの一番上にスクロールする

こんにちは、ちゃんけいです。最近はFF15とウォッチドッグス2どちらを買うか迷っています。
今回はリニューアル前にこのサイトで使っていた「クリックするとページのトップ(一番上)にもどるjs」のコードを紹介したいと思います。是非使う機会がありましたら使ってみてください。(コピぺでどうぞ!)

HTMLについて

このサイトでは以下のようなコードになっています。
a要素の中は自由に変えてみてください、このサイトではFont Awesomeのアイコンを使っています。

a要素につけているクラス名をjsの方でも使います。見た目と動きをしっかり分ける場合は、js-to-topなどのクラス名を別途つけるのもOK。

fontawesomeを使うようにしていますが、imgタグで画像でもテキストでも問題ありません。

<a href="" class="to-top">
<i class="fa fa-chevron-up" aria-hidden="true"></i>
</a>

jQueryについて

jsは以下のようになります。
「.to-top」というクラス名のついた要素をクリックした時に、0.7秒かけてスクロール量0(一番上)にスクロールする。という記述になります。

このコードで理解したい部分は、clickとanimateの動作になります。jsで動きをつくる場合は、動きのきっかけを与える必要があります。今回でいうと「clickしたら中身を実行するよ!」の部分です。
詳しくはJavaScript リファレンスjQuery日本語リファレンスで確認どうぞ。

$('.to-top').click(function(){
$('body,html').animate({scrollTop:0},700);
return false;
});

まとめ

ものすごく簡単につくることができると感じていただけたと思います。
ボタンの形を変えたい場合はa要素にcssでスタイルを当てると自由に変えることができるので使い勝手もよいと思います。コピぺで使ってみてください!(twitterで使った報告してもらえると喜びます)

今後もこのサイトで使っているjsやphp、cssアニメーションについて紹介させていただきたいと思っていますのでよろしくお願いします。

こんなコードの紹介してほしい!やこんなことをしたいけどわからないから教えて!(文字を大きくしたい!色を変えたい!とかでも大歓迎)とかありましたらtwitterの方でDMやリプを送っていただけると幸いです。@ajsai6で検索すると出て来ます。

ちゃんけいのツイッターへ

それではまた次回の記事でお会いしましょう。ちゃんけいでした。