因为现在使用的 iArtWork 主题有一个双击网页空白部分返回顶部的功能,返回顶部只需要双击空白处即可,非常方便。
我觉很好用,这里就把实现方法分享出来,希望这个 WordPress 技巧会对大家有用。
- 把下面 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,教程到这里就写完了,如果你有什么不懂的地方,欢迎在下方留言,我会为你解答的~
有意思,改天试试
第二个代码貌似无效?!
呵呵,这篇文章很不错,收下了,顺便转载.
额,第二个是返回底部吧~
现在点击好像没用了哦
@dreamkites 因为我现在博客没加这个功能
@周良 o
已经应用,果然好使。
@空空裤兜 哈哈,有用就好!
话说,多说的镶嵌不给力啊,上面都没什么空间了,重开一个:“取鼠标点击的位置,如果是用户设置的颜色,则回到顶部,否return”
@kn007 呵呵
@周良 这个我明白啊,问题拿到我那边用,就完全任何地方都识别成背景,无论你是点哪里都是回到顶部
表示用了后,点任何地方两下都会顶部了,点图片也是,囧
@kn007 点博客两边...网页背景处,你仔细看我的文章说明呀!!!!
@周良 没错啊,我用到我博客后随便点哪里都返回到顶部,你的点黑色背景部分到我知道啊
@kn007 你的loper有返回顶部功能了,貌似也不需要这个了吧
@周良 是的,但是我有这个习惯。。。。我在你这潜水很久了
@kn007 呵呵
@周良 看看,能不能改成取色,颜色对上就跳上去...
@kn007 什么意思?什么叫取色?
@周良 取鼠标点击的位置,如果是用户设置的颜色,则回到顶部,否return
@kn007 ....我这篇文章里面说的空白部分,就是指网页的背景...打个比方,就是周良博客现在这些灰黑色的地方(这种被称为网页中的空白部分,也就是背景。并不是指的白色部分。我文章都有说明。)
我的怎么总是向下滚动呀? :evil:
我的站不知道为什么没效果,第二个有效果,但是是向下滚动,可能和我用 Safari 有关?
没效果的原因可能是这样,我在空白处双击时会选中我的博客名字 “iColor's”,所以我感觉好像我的页面中的背景已经不是“背景”了,不知你是否可以理解。
这么久了,不知还回复不回复? :!:
这个方法不错,省的到处找箭头了
@空空裤兜 @空空裤兜: 嘿嘿,但是也要加一个提示,不然游客不知道的
嗯,学习了~
@snowinmay @snowinmay: 对你有用吗?
真的可以啊。不过要点最旁边的空白处,页面里面的空白处不管用。
@豆腐面 @豆腐面: 不是,你看一下我文字最后一句话,是网页背景纯色的地方,并不是白色的地方,空白部分和白色不一样的!
实用的功能,会不会让代码结构更加臃肿了呢。
@邓肯 @邓肯: 会的,wordpress已经很臃肿了...但是我貌似对这种功能情有独钟 :razz: :razz: :razz:
这个功能不错,先收藏了。不过没说明很多人都不知道。
@朵未 @朵未: 是的,可以在背景上面加个提示
习惯用TOP,或者旁边的小箭头了。不过,我刚才试了一下,发现没作用哇,是不是贵站没用这个功能... :mad:
@damao @damao: 黑色背景处双击...
Chrome下比较烦这个 我输上面的信息 有时候双击框框就不用自己填写 他给返回顶部了 :!:
@小米04 @小米04: 对,我也有遇到这种问题