こんにちは、ryohei（@ityryohei）です！
Webサイトでよく目にするトップへ戻るのリンクの作成方法をご紹介します。
ページトップへ戻るリンクを設置する
クリックまたはタップするとページの上部へ戻るリンクを設置します。
HTML
HTMLを記述します。
以下ではaタグを使用していますが、p, div, span等、好きなタグを使用することができます。その際はリンク(href)を削除します。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<a id="pagetop" href="#">TOP</a>
</body>
</html>
CSS
記述したHTMLにスタイルを定義します。本ページでは、fixedで画面の右下に要素を固定しています。
body {
height: 2000px;
margin: 0;
padding: 0;
}
#pagetop {
position: fixed;
bottom: 20px;
right: 0;
padding: 20px;
color: #fff;
background: #C3A572;
text-decoration: none;
}
以下デモです。
HTMLとCSSを記述しただけの状態なので、動きはありません。TOPと書かれたリンクをクリックすると一番上に戻るだけかと思います。
なので、以下で紹介するjQueryで、クリックした後のアニメーションを記述します。
jQueryを読み込む
GoogleのCDNを利用してjQueryを読み込みます。
CDNというのはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用するサービスを指します。ネットワークに接続されている機器であれば利用することができます。
CDNには有料、無料のものがありますが、jQueryのライブラリファイルは無料で利用できます。
jQueryのライブラリは以下の記述で読み込むことができます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
トップへ戻る際にアニメーションを付ける
最初はスタンダードな方法で記述してみます。
TOPのリンクをクリックすると、一定のスピードを保ったままスムーズにトップへ戻ります。
JS
<script>
$(function(){
var top = $('#pagetop');
top.click(function(){
$('body,html').animate({
scrollTop: 0}, 1000);
return false;
});
});
</script>
以下デモです。
スクロールする位置はscrollTop: 0, スクロールスピードは1000の部分に設定します。
デモでは戻る位置を0にしているので一番上へ, スクロールスピードに1000を設定しているので1秒かけて一番上までスクロールします。
こちらの方法でも問題はないですが、アニメーションに緩急を付けたい方もいらっしゃると思います。
そこで、jQueryのeasing(イージング)を使って、アニメーションに緩急を付けてみたいと思います。
イージングでアニメーションを付ける
イージングは動きに緩急を付けることができます。ゆっくり動いたり、早く動いたり、現実世界における物体に近い動きを実現することができます。
※以下のページに各イージングの詳しい記載がありますので、一度ご覧ください。
ただ、jQueryでは標準で使うことができるイージングは以下の2種類しかありません。
- swing
- linear
なので、プラグインを読み込んで使用できるイージングの種類を増やします。
プラグインは以下の方法で読み込むことができます。ここでもCDNを利用します。
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
後は使用したいイージングを上記で記述したスクリプトに追記します。
具体的には以下の箇所に記述します。
<script>
$(function(){
var top = $('#pagetop');
top.click(function(){
$('body,html').animate({
scrollTop: 0}, 1000, 'ここに使用するイージングを指定');
return false;
});
});
</script>
一定量スクロールしてトップへ戻るを表示する
一定量スクロールしてからトップへ戻るを表示します。
以下のスクリプトでフェードイン、アウトの効果を付加します。
<script>
$(function(){
var top = $('#pagetop');
top.hide();
$(window).scroll(function(){
if( $(window).scrollTop() > 200 ){
top.fadeIn();
}else{
top.fadeOut();
}
});
top.click(function(){
$('body,html').animate({
scrollTop: 0}, 1000, 'easeInElastic');
return false;
});
});
</script>
最後に
ここまでご紹介したコードをまとめておきます。
イージングには easeInElasticを指定しています。
Copy & Paste
<html>
<head>
<meta charset="utf-8">
<style>
body {
height: 2000px;
margin: 0;
padding: 0;
}
#pagetop {
position: fixed;
bottom: 20px;
right: 0;
padding: 20px;
color: #fff;
background: #C3A572;
text-decoration: none;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<script>
$(function(){
var top = $('#pagetop');
top.hide();
$(window).scroll(function(){
if( $(window).scrollTop() > 200 ){
top.fadeIn();
}else{
top.fadeOut();
}
});
top.click(function(){
$('body,html').animate({
scrollTop: 0}, 1000, 'easeInElastic');
return false;
});
});
</script>
</head>
<body>
<a id="pagetop" href="#">TOP</a>
</body>
</html>
