WordPress 技巧:双击空白部分返回顶部

因为现在使用的 iArtWork 主题有一个双击网页空白部分返回顶部的功能,返回顶部只需要双击空白处即可,非常方便。

我觉很好用,这里就把实现方法分享出来,希望这个 WordPress 技巧会对大家有用。

  1. 把下面 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,修改完的主题即可通过双击主题的空白部分(边缘四周什么的)实现返回顶部效果(这个是我博客的效果,属于快速分会),具体效果可以在这里博客进行预览!

  1. 下面更新一个缓慢返回顶部的方法:
< 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,教程到这里就写完了,如果你有什么不懂的地方,欢迎在下方留言,我会为你解答的~

  1. 话说,多说的镶嵌不给力啊,上面都没什么空间了,重开一个:“取鼠标点击的位置,如果是用户设置的颜色,则回到顶部,否return”

                    1. @kn007 ....我这篇文章里面说的空白部分,就是指网页的背景...打个比方,就是周良博客现在这些灰黑色的地方(这种被称为网页中的空白部分,也就是背景。并不是指的白色部分。我文章都有说明。)

  2. 我的站不知道为什么没效果,第二个有效果,但是是向下滚动,可能和我用 Safari 有关?

    没效果的原因可能是这样,我在空白处双击时会选中我的博客名字 “iColor's”,所以我感觉好像我的页面中的背景已经不是“背景”了,不知你是否可以理解。

    这么久了,不知还回复不回复? :!:

  3. 习惯用TOP,或者旁边的小箭头了。不过,我刚才试了一下,发现没作用哇,是不是贵站没用这个功能... :mad:

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注