分享自：不吃泡面的泡面  感谢博主原文：原文地址
 
泡面本来想使用已经由Quick Comments插件调用好的Jquery来实现Wordpress中的滚动效果，但是以防日后更换插件，所以在网络上找到一套已经编写好的JS代码，这 段代码可以应用在Wordpress的页面中，实现页面中的已定义好的锚标签之间相互滚动效果。
 
实 例
　　可 以点击这里查看此页面的滚动效果（点这里会滚动至评论框处,在 泡面的页面中，“发表评论”“阅读评论”和返回顶部按钮都有使用到锚标签的滚动效果）
实现方法
  　　其实用Jquery的scrollto来实现会更简便一些，但是手写需要做一些判定，泡面还是将此JS代码贡献出来吧。这段代码在万戈的博客上也有提 过，泡面觉得很好，所以借来引用之，再发表此博文推广一下。

view plaincopy to clipboardprint?

/* Smooth scrolling 
Changes links that link to other parts of this page to scroll 
smoothly to those links rather than jump to them directly, which 
can be a little disorienting. 
sil, <a href="http://www.kryogenix.org/">http://www.kryogenix.org/</a> 
v1.0 2003-11-11 
v1.1 2005-06-16 wrap it up in an object 
*/  
var ss = {  
fixAllLinks: function() {  
// Get a list of all links in the page  
var allLinks = document.getElementsByTagName('a');  
// Walk through the list  
for (var i=0;i<allLinks.length;i++) {  
var lnk = allLinks[i];  
if ((lnk.href && lnk.href.indexOf('#') != -1) &&  
( (lnk.pathname == location.pathname) ||  
('/'+lnk.pathname == location.pathname) ) &&  
(lnk.search == location.search)) {  
// If the link is internal to the page (begins in #)  
// then attach the smoothScroll function as an onclick  
// event handler  
ss.addEvent(lnk,'click',ss.smoothScroll);  
}  
}  
},  
smoothScroll: function(e) {  
// This is an event handler; get the clicked on element,  
// in a cross-browser fashion  
if (window.event) {  
target = window.event.srcElement;  
} else if (e) {  
target = e.target;  
} else return;  
// Make sure that the target is an element, not a text node  
// within an element  
if (target.nodeName.toLowerCase() != 'a') {  
target = target.parentNode;  
}  
// Paranoia; check this is an A tag  
if (target.nodeName.toLowerCase() != 'a') return;  
// Find the <a name> tag corresponding to this href  
// First strip off the hash (first character)  
anchor = target.hash.substr(1);  
// Now loop all A tags until we find one with that name  
var allLinks = document.getElementsByTagName('a');  
var destinationLink = null;  
for (var i=0;i<allLinks.length;i++) {  
var lnk = allLinks[i];  
if (lnk.name && (lnk.name == anchor)) {  
destinationLink = lnk;  
break;  
}  
}  
if (!destinationLink) destinationLink = document.getElementById(anchor);  
// If we didn't find a destination, give up and let the browser do  
// its thing  
if (!destinationLink) return true;  
// Find the destination's position  
var destx = destinationLink.offsetLeft;  
var desty = destinationLink.offsetTop;  
var thisNode = destinationLink;  
while (thisNode.offsetParent &&  
(thisNode.offsetParent != document.body)) {  
thisNode = thisNode.offsetParent;  
destx += thisNode.offsetLeft;  
desty += thisNode.offsetTop;  
}  
// Stop any current scrolling  
clearInterval(ss.INTERVAL);  
cypos = ss.getCurrentYPos();  
ss_stepsize = parseInt((desty-cypos)/ss.STEPS);  
ss.INTERVAL =setInterval('ss.scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);  
// And stop the actual click happening  
if (window.event) {  
window.event.cancelBubble = true;  
window.event.returnValue = false;  
}  
if (e && e.preventDefault && e.stopPropagation) {  
e.preventDefault();  
e.stopPropagation();  
}  
},  
scrollWindow: function(scramount,dest,anchor) {  
wascypos = ss.getCurrentYPos();  
isAbove = (wascypos < dest);  
window.scrollTo(0,wascypos + scramount);  
iscypos = ss.getCurrentYPos();  
isAboveNow = (iscypos < dest);  
if ((isAbove != isAboveNow) || (wascypos == iscypos)) {  
// if we've just scrolled past the destination, or  
// we haven't moved from the last scroll (i.e., we're at the  
// bottom of the page) then scroll exactly to the link  
window.scrollTo(0,dest);  
// cancel the repeating timer  
clearInterval(ss.INTERVAL);  
// and jump to the link directly so the URL's right  
location.hash = anchor;  
}  
},  
getCurrentYPos: function() {  
if (document.body && document.body.scrollTop)  
return document.body.scrollTop;  
if (document.documentElement && document.documentElement.scrollTop)  
return document.documentElement.scrollTop;  
if (window.pageYOffset)  
return window.pageYOffset;  
return 0;  
},  
addEvent: function(elm, evType, fn, useCapture) {  
// addEvent and removeEvent  
// cross-browser event handling for IE5+,  NS6 and Mozilla  
// By Scott Andrew  
if (elm.addEventListener){  
elm.addEventListener(evType, fn, useCapture);  
return true;  
} else if (elm.attachEvent){  
var r = elm.attachEvent("on"+evType, fn);  
return r;  
} else {  
alert("Handler could not be removed");  
}  
}  
}  
ss.STEPS = 30;  //设置滑动速度  
ss.addEvent(window,"load",ss.fixAllLinks); 

　将以上代码复制并存为一个jS文件，然后在需要调用的页面进行调用即可。泡面在single.php 与page.php页面中引用了此代码。
　 　注意：可能某些主题在代码方面写的不够完善，没有对应的锚标签可以滚动。大家还是先要检查好自己的页面是否有对应的锚标签可供调用。
例 子：

<a href="#test">点 这里滚动</a>  
<div id="test">这里是内容</div> 

在以上代码中，A属性和ID需要有对应关系，这样才可以实现锚标签之间的滚动。

Related Posts

February 12, 2010 — 一款新发现的 wordpress 相册插件
February 8, 2010 — 分享WordPress博客搜索引擎优化十一点经验
February 4, 2010 — godaddy 搬家记–之雪上加霜
February 1, 2010 — godaddy 搬家记–之柳暗花明
January 28, 2010 — 一款 wordpress 评论表情插件
January 26, 2010 — wp为什么突然 不发送评论和回复的邮件？
January 25, 2010 — 感谢 [...]