WordPress网站双击空白处返回顶部的js代码

 2021-05-12 08:51:59  793 浏览  0 评论   赞

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

WordPress网站双击空白处返回顶部的js代码

图9971-1:

因为现在使用的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=sc

document.ondblclick=initialize

// ]]></script>

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

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

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

 

转载请注明:网创网 www.netcyw.cn/b9971.html

()
发表评论
  • 昵称
  • 网址
(0) 个小伙伴发表了自己的观点
    暂无评论

Copyright © 2018-2022 小王子工作室 版权所有 滇ICP备14007766号-3 邮箱:yangzy187@126.com