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