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

实现“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>之前就可以了。

 

wordpress


标签:  |  |  | 
将此文分享到:


转载请注明来自风腾网-wordpress企业主题,本文地址:http://fengten.com/1276.html
除非注明,风腾网-wordpress企业主题文章均为原创,转载请注明出处和链接!
友荐云推荐

相关文章

发表评论:

  1. dmj 发表:

    乍一看是鸟哥的HotNewsPro,仔细一看风格变了很多。博主好牛!嘿嘿,我以后也想挂点小广告,今后还要多请教啊。 :grin:

*

*

顶部 友荐云推荐