当前位置:首页 > 网站建设

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

时间:2018-11-24 02:41:02来源:网站建设作者:seo实验室小编阅读:93次「手机版」
 

周良博客

因为现在使用的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=scdocument.ondblclick=initialize// ]]></script>

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

OK,教程到这里就写完了,如果你有什么不懂的地方,欢迎在下方留言,我会为你解答的。

PS:本文中说到的网站空白部分,指的是背景处,即为周良博客的黑色背景处双击即可返回顶部!

相关阅读

Swift中performSelector返回值的用法

最近使用swift,翻译OC的代码时,发现performSelector的返回值与OC中的用法相差很大。在OC中返回的是ID类型,而swift中返回的是 Unmana

socket编程accept函数返回值的理解

accept函数返回值成功时返回非负值,失败时返回-1accept函数接受一个客户端请求后会返回一个新的SOCKFD值,当有不同的客户端同时有不

C语言scanf函数的返回值问题

不经意中发现scanf()的返回值问题,自己试验和了解了一下,一些所知与各位分享; void main() { int a;int b;int c;printf("请输入

JavaScript返回上一页的几种方法及区别介绍

JavaScript返回上一页和刷新当前页 window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行

case when then 后返回多个值

背景:查询数据,需要根据不同性别选择不同的排序字段和排序规则,总体先按照性别排列,“女”排在“男”前,然后性别为“男”按照last_nam

分享到:

栏目导航

推荐阅读

热门阅读