双击空白部分返回顶部

实际上实现“WordPres主题双击空白部分返回顶部”的方法很是简单,只需要把下面JS代码加到主题的头部模版中:
  1. <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文件的 之前就可以了

技术 2012-04-22 09:59:54 通过 网页 浏览(1123) 打印

共有0条评论!

发表评论