含标签 "JavaScript" 的文章

博客的文章往往篇幅比较长，如果访客要访问博客的其它文章（例如通过侧栏的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');