php返回顶部按钮,博客添加回到顶部按钮

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

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

Top

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

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

Top

为了方便起见，以上按钮的代码在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 = $('Top').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');