首页 » 建站技术 » WordPress » 浏览内容

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


2012-04-22 09:59:54 1,970 0 发表评论 字体: 作者:C.K.

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

实际上实现“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文件的之前就可以了

      网站统计 Statistics

      • 创建时间: 2005年1月3日 距今4761 天
      • 日志总数: 2461
      • 评论总数: 630
      • 标签总数: 654
      • 链接总数: 273
      • 最后更新: 2017-7-1 18:16:33
      • 您是本站第 13193854 位访客

      广告区 Guǎng Gào