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

182

因为现在使用的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文件的 之前就可以了。
OK,教程到这里就写完了,如果你有什么不懂的地方,欢迎在下方留言,我会为你解答的
PS:本文中说到的网站空白部分,指的是背景处,即为周良博客的黑色背景处双击即可返回顶部!

如果你有设计或者 WordPress 方面的项目需求,可以和我联系 Email:wwwzhouliang@gmail.com。

作者主页 邮箱 微博 腾讯微博 QQ Twitter Facebook Google+

共 182 条评论

  1. 空空裤兜 回复

    已经应用,果然好使。

    1. 周良 (文章作者) 回复

      哈哈,有用就好!

  2. dreamkites 回复

    现在点击好像没用了哦

    1. 周良 (文章作者) 回复

      因为我现在博客没加这个功能

      1. dreamkite 回复

        o

  3. dreamkites 回复

    现在点击好像没用了哦

    1. 周良 (文章作者) 回复

      因为我现在博客没加这个功能

      1. dreamkite 回复

        o

  4. 百家网络博客 回复

    额,第二个是返回底部吧~

  5. 百家网络博客 回复

    额,第二个是返回底部吧~

  6. Rich 回复

    呵呵,这篇文章很不错,收下了,顺便转载:http://rich.ga/post/306

  7. Rich 回复

    呵呵,这篇文章很不错,收下了,顺便转载:http://rich.ga/post/306

  8. Rich 回复

    第二个代码貌似无效?!

  9. Rich 回复

    第二个代码貌似无效?!

Leave a Reply

您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。 Required fields are marked *

返回顶部