因为现在使用的 iArtWork主题有一个双击网页空白部分返回顶部的功能,所以已经习惯在看完文章之后双击一下博客的空白部分,于是乎我就养成了在任何博客都双击空白部分的习惯…
所以周良就想把这个「WordPres主题双击空白部分返回顶部」的功能分享给大家,这样周良以后来你的博客看文章,就不用改掉双击空白部分这个习惯了。希望这个 WordPress 技巧会对大家有用!
实际上实现「WordPres主题双击空白部分返回顶部」的方法很是简单,只需要把下面JS代码加到主题的头部模版中:
<script type=”text/javascript”>
$(function(){
var scrollTo = function(top, duration, callback) {
var w = $(window);
var FPS = 50;
var currentTop = w.scrollTop();
var offset = (currentTop - top) / (duration FPS / 1000);
var n = 0;
var prevTop = currentTop;
var t = setInterval(function() {
if ((prevTop - top) (currentTop - top) <= 0) {
clearInterval(t);
currentTop = prevTop = top;
w.scrollTop(top);
if (callback) callback();
} else {
prevTop = currentTop;
w.scrollTop(currentTop -= offset);
}
}, 1000 / FPS);
}
$(‘body’).dblclick(function(){
scrollTo(0, 200, function(){
});
$(“.textField,#commentForm textarea”).focus();
});
$(‘#container.#footer’).dblclick(function(e){e.stopPropagation();});
});
</script>
OK,修改完的主题即可通过双击主题的空白部分(边缘四周什么的)实现返回顶部效果(这个是我博客的效果,属于快速分会),具体效果可以在这里博客进行预览。
下面更新一个缓慢返回顶部的方法:
< script type = ”text / javascript” > // < ![CDATA[
var currentpos, timer;
function initialize() {
timer = setInterval(“scrollwindow()”, 10);
}
function sc() {
clearInterval(timer);
}
function scrollwindow() {
window.scrollBy(0, 1);
}
document.onmousedown = sc document.ondblclick = initialize
// ]]></script>
使用方法和上面的一样,直接放到 header.php
文件的 </head>
之前就可以了。
OK,教程到这里就写完了,如果你有什么不懂的地方,欢迎在下方留言,我会为你解答的~~
PS:本文中说到的网站空白部分,指的是背景处,即为周良博客的黑色背景处双击即可返回顶部!