2016年9月17日土曜日

Bloggerに簡単に'トップに戻る'ボタンを設置


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

上の通りに

<head>中にjQueryのコードを追加 (このテンプレートは既に追加済みなので飛ばしました)
(配布されているテンプレートだと入ってますね)

レイアウトから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 に
(必要に応じて画像は自ブログ等にアップしておく)

F(uriouz)

欲しいものリスト
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

0 comments:

コメントを投稿

スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。

注: コメントを投稿できるのは、このブログのメンバーだけです。

Recent Posts

 
"The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License."