超簡単！　ゆっくりスムーズに動く”トップに戻る”ボタンを設置する方法

公開日： 2015/04/07 : Java script jquery上へ戻る

Pocket

2015-04-06 10_05_31-javascript - Google Search

縦長のサイトがはやっている現在、下までスクロールした後にいっきに上まで戻る、いわゆる”トップへ戻る”ボタンは必需品です。

タグにIDをいれてa タグのhrefに#ID名とやれば、簡単に実現できるのですが、カチッと動くのではなくて、ヌルヌル上に上がっていくエフェクトがかかっていたほうがかっこいい。

しかもある程度下にスクロールしたらフワッと突然現れるほうがなおよし。

ということで簡単に実装できる方法を記します。

ヘッダー部分にJqueryを

大抵のサイトはヘッダー部分とフッター部分は別ファイルになっていて、全画面共通で呼び出していると思います。

今回の”トップへ戻る”のような全画面共通で使うものは、このヘッダーもしくはフッター部分に書くのがよいです。理由はいちいち全部のファイルに書く必要がないということと、修正する場合に一箇所だけ直せばよいからです。

いれるのは下記。headタグの中ではなくてbodyタグのなかでも動くのでわかりやすいところに差し込みましょう。

*jqueryの本体を入れるので、既に他の箇所で読み込んでいて、コンフリクトが起きている場合は、jquery.min.jsを読み込んでる部分をコメントアウトして動くか確認してください。

<!-- Crunchify's Scroll to Top Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</script>
 
<script>            
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.crunchify-top').fadeIn(duration);
} else {
jQuery('.crunchify-top').fadeOut(duration);
}
});
 
jQuery('.crunchify-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

</script>

jQuery(document).ready(function() {

var offset = 220;

var duration = 500;

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop() > offset) {

jQuery('.crunchify-top').fadeIn(duration);

} else {

jQuery('.crunchify-top').fadeOut(duration);

}

});

jQuery('.crunchify-top').click(function(event) {

event.preventDefault();

jQuery('html, body').animate({scrollTop: 0}, duration);

return false;

})

});

</script>

スタイルを入れる

”トップへ戻る”ボタンもしくはリンクのスタイルを入れます。ここは個人の好みで変わると思うので、デフォルトとして下記をいれてみてください。

先のscriptを入れた箇所の下でOKです。

/*Go to top*/
.crunchify-top:hover {
color: #fff !important;
background-color: #ed702b;
text-decoration: none;
}
 
.crunchify-top {
display: none;
position: fixed;
bottom: 1rem;
right: 1rem;
width: 3.2rem;
height: 3.2rem;
line-height: 3.2rem;
font-size: 1.4rem;
color: #fff;
background-color: rgba(0,0,0,0.3);
text-decoration: none;
border-radius: 3.2rem;
text-align: center;
cursor: pointer;
}

/*Go to top*/

.crunchify-top:hover {

color: #fff !important;

background-color: #ed702b;

text-decoration: none;

}

.crunchify-top {

display: none;

position: fixed;

bottom: 1rem;

right: 1rem;

width: 3.2rem;

height: 3.2rem;

line-height: 3.2rem;

font-size: 1.4rem;

color: #fff;

background-color: rgba(0,0,0,0.3);

text-decoration: none;

border-radius: 3.2rem;

text-align: center;

cursor: pointer;

}

リンクを設置

”トップへ戻る”トリガーとなるリンクをいれます。先のスタイルでfix属性をいれてあるので、ヘッダー、フッターどちらにいれても出力箇所は同じですが、画面下方にでるものなので、感覚的にフッターのほうがわかりやすいと思います。

<a href="#" class="crunchify-top">↑</a>

1	<a href="#" class="crunchify-top">↑</a>

↑の部分はもちろん変更可能なのでお好きな文字や画像に変えてください。

以上で設定はおしまいです。

ページをリロードして、リンクを押すと、ヌルッと上に戻ります。

超簡単です。

参考：http://crunchify.com/how-to-add-smooth-scrolling-back-to-top-button-to-your-wordpress-blog/

超簡単！　ゆっくりスムーズに動く”トップに戻る”ボタンを設置する方法

ヘッダー部分にJqueryを

スタイルを入れる

リンクを設置

More from my site

Ads by Google

関連記事

スマートフォンで横長のテーブルを扱う方法

Ads by Google

Ads by Google