Easily add Smooth 'Scroll To Top' button in Blogger - Crawlist
http://www.crawlist.net/2014/04/Easily-add-Smooth-Scroll-to-top-button-in-Blogger.html
https://crawlist.blogspot.com/2014/04/Easily-add-Smooth-Scroll-to-top-button-in-Blogger.html
上の通りに
<head>中に jQuery (1.3.2) のコードを追加 (このテンプレートは既に追加済みなので飛ばしました)
(配布されているテンプレートだと入っているものがありますね)
レイアウトからHTML/JavaScript のガジェットを追加 (上ページのコードをコピー)
Code:
<style>
.ks-back-to-top {
position: fixed;
bottom: 2em;
right: 15px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class="ks-back-to-top" src="画像URL" />
<script type="text/javascript">
/*****www.crawlist.net***/
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.ks-back-to-top').fadeIn(duration);
} else { //www.crawlist.blogspot.com
jQuery('.ks-back-to-top').fadeOut(duration);
}
});
jQuery('.ks-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
Image Url は好みの画像Url に
(必要に応じて画像は自ブログ等にアップしておく)
0 comments:
スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。
注: コメントを投稿できるのは、このブログのメンバーだけです。