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

林继 WordPress 2,270 共写了238个字 (2012-04-22 9:59:54) 没有评论 打印 扫描二维码 百度已收录

实际上实现“WordPres主题双击空白部分返回顶部”的方法很是简单,
只需要把下面JS代码加到主题的头部模版中:

  1. <script type="text/javascript">
  2. $(function(){
  3.     var scrollTo = function(top, duration, callback) {
  4.         var w = $(window);
  5.         var FPS = 50;
  6.         var currentTop = w.scrollTop();
  7.         var offset = (currentTop - top) / (duration * FPS / 1000);
  8.         var n = 0;
  9.         var prevTop = currentTop;
  10.         var t = setInterval(function() {
  11.             if ((prevTop - top) * (currentTop - top) <= 0) {
  12.                 clearInterval(t);
  13.                 currentTop = prevTop = top;
  14.                 w.scrollTop(top);
  15.                 if (callback) callback();
  16.             } else {
  17.                 prevTop = currentTop;
  18.                 w.scrollTop(currentTop -= offset);
  19.             }
  20.         }, 1000 / FPS);
  21.     }
  22.     $('body').dblclick(function(){
  23.         scrollTo(0, 200, function(){
  24.         });
  25.         $(".textField,#commentForm textarea").focus();
  26.     });
  27.     $('#container.#footer').dblclick(function(e){e.stopPropagation();});
  28. });
  29. </script>

OK,修改完的主题即可通过双击主题的空白部分(边缘四周什么的)实现返回顶部效果(这个是我博客的效果,属于快速分会),具体效果可以在这里博客进行预览!

下面更新一个缓慢返回顶部的方法:

  1. <script type="text/javascript">// < ![CDATA[
  2. var currentpos,timer;
  3. function initialize()
  4. {
  5. timer=setInterval("scrollwindow()",10);
  6. }
  7. function sc(){
  8. clearInterval(timer);
  9. }
  10. function scrollwindow()
  11. {
  12. window.scrollBy(0,1);
  13. }
  14. document.onmousedown=sc
  15. document.ondblclick=initialize
  16. // ]]></script>

使用方法和上面的一样,直接放到header.php文件的 之前就可以了

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

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

< >