トップまでスクロールしたい

ブログ

ページをある程度スクロールと現れてクリックするとページの最上部まで戻るアレを付けたい。

 

やることは3つ。

 

jQuery

設定>詳細設定の「headに要素を追加」に

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript">

をコピペ。

JavaScriptとHTML

デザイン>カスタマイズの「フッタ」にコピペ。

 

<script type='text/javascript'>
$(function() {
var pageTop = $('.page_top');
pageTop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
pageTop.click(function () {
$('body, html').animate({scrollTop:0}, 500, 'swing');
return false;
});
});
</script>

<a href='#top' class='page_top' id='pageTop'>PAGE TOP ▲</a>

 

太字の200のところでどれくらいスクロールしたら表示されるかを指定。

500のところで戻るスピードを指定。

CSS

デザイン>カスタマイズの「デザインCSS」にコピペ。

/* PageTop */
#pageTop {
position:fixed;
bottom:10px;
right:10px;
padding:10px 20px;
color:#fff;
font-size:20px;
text-decoration:none;
background:#333;
}
#pageTop:hover {
background-color:#57aaa2;
}

Go Top