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

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


2012-04-22 09:59:54 2,260 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日 距今5065 天
    • 日志总数: 2461
    • 评论总数: 630
    • 标签总数: 654
    • 链接总数: 273
    • 最后更新: 2018-8-31 17:57:04
    • 您是本站第 14162827 位访客

    广告区 Guǎng Gào