博客的文章往往篇幅比较长,如果访客要访问博客的其它文章(例如通过侧栏的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');
太有用了,很好的文章,支持。
@realfiona
测试是不是发出去了。