CSS3教程

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

字号+ 作者:建站教程网 来源:建站教程网 2012-04-27 13:26 我要评论( )

因为现在使用的iArtWork主题有一个双击网页空白部分返回顶部的功能,所以已经习惯在看完文章之后双击一下博客的空白部分,于是乎我就养成了在任何博客都双击空白

因为现在使用的iArtWork主题有一个双击网页空白部分返回顶部的功能,所以已经习惯在看完文章之后双击一下博客的空白部分,于是乎我就养成了在任何博客都双击空白部分的习惯。

实际上实现“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:本文中说到的网站空白部分,指的是背景处,即为周良博客的黑色背景处双击即可返回顶部!

感谢 周良 的投稿

(责任编辑:sunsun)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 内容除了原创与相关性 我们还要注意什么?

    内容除了原创与相关性 我们还要注意什么?

    2014-11-14 17:36

  • 该如何在论坛发布外链?

    该如何在论坛发布外链?

    2014-11-14 17:30

  • 浅谈传统企业网站一些关于SEO方面的问题

    浅谈传统企业网站一些关于SEO方面的问题

    2014-11-14 17:29

  • 社区网站存在的问题有哪些?

    社区网站存在的问题有哪些?

    2014-11-14 17:29

网友点评