博客的文章往往篇幅比较长,如果访客要访问博客的其它文章(例如通过侧栏的Widgets访问相关的文章)就需要滚动鼠标,移动到页面的头部。比较人性的一个设计是,在页面的底部(或者中靠近下的位置)添加一个“回到页面顶部”的按钮,可以快速定位到文章的顶部位置。

这个功能设计起来不难,可以采用如一文中提到的锚链接形式,例如回到顶部按钮是一个链接:

<a href="#top">Top</a>

将其放到页面底部,点击该链接可以直接定位到页面顶部。但是如果我们不希望用链接来实现呢,而是模拟一个按钮(用span),并且希望按下回到顶部按钮的时候,可以比较平滑地回到顶部,那该怎么做呢?代码非常简单,这里只用到些许的CSS样式以及jQuery代码。

首先在在文章页面body底部添加以下代码(index.php或者single.php):

<span id="back-to-top">Top</span>

为了方便起见,以上按钮的代码在jQuery中创建添加,不需要手动去修改php文件。同时,利用jQuery完成按钮的行为,主要通过监听window的onscroll事件,当滚动距页面顶部超过100px的时候,淡入显示按钮。当滚动距页面顶部少于100px的时候,淡出隐藏按钮。使用jQuery的animate函数,可以实现平滑地滚动效果(利用document.body或者document.documentElement的scrollTop属性完成动画效果)。

添加的jQuery代码如下所示:

/* Add a back to top button */
function back_to_top()
{
    /* Cache back-to-top button object */
    var $top = $('<span id="back-to-top">Top</span>').appendTo('body');

    /* Cross-browser compatible in scrollTop */
    var $body = (!window.opera) ? $('html, body') : (document.compatMode == 'CSS1Compat'
        ? $('html') : $('body'));

    if ($top.length == 0)
         return;
 
    /* Hide back-to-top button at first */
    $top.hide();
 
    /* Fade in back-to-top button when need */
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $top.fadeIn();
        } else {
            $top.fadeOut();
        }
    });
 
    /* Scroll to top when click back-to-top button */
    $top.click(function () {
        $body.animate({ scrollTop: 0 }, 800);
    });
}

back_to_top();

同时在博客样式(style.css)中添加以下自定义的样式内容:

#back-to-top {
    background-color: #F5F5F5;
    bottom: 0;
    box-shadow: 0 0 6px #808080;
    color: #444444;
    padding: 5px 10px;
    position: fixed;
    right: 50px;
    cursor: pointer;
}

这里将按钮固定定位到(position: fixed)页面右下角,并且添加边框阴影等效果。

最后附上一段区分外部链接的代码片断(摘自Learning jQuery 3rd edition)

    /* Add tag next to the external link */
    $('.column .post-entry a').not(':has(img)').filter(function() {
        return this.hostname && this.hostname != location.hostname;
    }).addClass('external').attr('target', '_blank');

转载请注明转自: 团子的小窝 , 本文固定链接: 博客添加回到顶部按钮

  1. 红叶社区's avatar
    红叶社区 发表于 2014-07-23 5:12:23 回复 #1

    太有用了,很好的文章,支持。

  2. kodango's avatar
    发表于 2012-11-29 14:16:48 回复 #2

    @realfiona
    测试是不是发出去了。