【django】搭建博客教程(4)——超级简单实现滚动回到页面顶端按钮

一.jQuery代码：

首先使用window对象的scroll回调函数来控制当页面向下滚动超过150px的时候，显示back to top按钮，否则隐藏。

其次，当点击“回到顶端”的时候，调用animate方法来滚动页面到顶端。

以下代码可以以script的形式插入到html中。

    $(document).ready(function() {
        // 滚动窗口来判断按钮显示或隐藏
        $(window).scroll(function() {
            if ($(this).scrollTop() > 150) {
                $('.back-to-top').fadeIn(100);
            } else {
                $('.back-to-top').fadeOut(100);
            }
        });

        // jQuery实现动画滚动
        $('.back-to-top').click(function(event) {
            event.preventDefault();
            $('html, body').animate({scrollTop: 0}, 500);
        })
    });

二.CSS代码

在你的css文件中添加：

/***********************************************************************************************/
/* back-to-top Button */
/***********************************************************************************************/
.back-to-top { position: fixed; bottom: 3em; right: 3em; text-decoration: none; color: #EEEEEE; background-color: rgba(0, 0, 0, 0.3); font-size: 12px; padding: 1em; display: none; border-radius: 3px; border: 1px solid #CCCCCC; }

.back-to-top:hover { background-color: rgba(0, 0, 0, 0.3); }

三.html代码：

可以在footer中添加下面代码：

<a href="#" class="back-to-top">回到顶端</a>

四.效果：

以下是我自己博客的测试效果，一开始按钮是隐藏的，往下滑才会出现，点击后，按钮随着页面平滑往顶端滑动，到达顶端按钮再次隐藏。