支持链接到新页面的锚点平滑跳转

//页内锚点滑动效果
$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);

更具体详细的方法

//页内锚点滑动效果,来自http://www.learningjquery.com/的方法
$('a[href*=#]').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname){
                var $target = $(this.hash);
                $target = $target.length && $target|| $('[name=' + this.hash.slice(1) +']');
                 if ($target.length) {
                        var targetOffset = $target.offset().top;
                        $('html,body').animate({scrollTop: targetOffset}, 1000);
                        //return false; //使其呈现清晰的URL链接
                }
         }  
});

 

网上有很多锚点平滑滚动的javascript脚本下载，但是很多脚本需要手工在XHTML上写入鼠标事件，更加别说支持链接到新页面的锚点了。而AnchorArt.js却可以做到一次引入自动给页面带锚点的链接添加平滑滚动效果，并且支持链接到新页面的锚点！AnchorArt.js（压缩版）仅仅只有2KB大小!

关于链接到新页面的锚点平滑滚动的思路：

如果A页面打开url带锚点的B页面（#号），那么浏览器在页面下载完毕后自动跳到相应的锚点上，据我所知还没有办法阻止这个浏览器默认的行为。
但是如果B页面没有对应的锚点浏览器就不会进行跳转了，所以我们在url的锚点附加一点额外的信息那就可以让浏览器不进行调转了，接下来我们的脚本就可以通过锚点附加的参数进行平滑滚动操作了。
所有的操作通过绑定事件完成，在脚本没有运行的时候也不会破坏原有锚点的功能
所以我在网上一搜“锚点平滑滚动”结果一大堆，选择了个写的比较简洁的脚本，按照上面的思路给它写个事件绑定和接收锚点参数滚动的效果于是就出了AnchorArt.js。

/*
AnchorArt.js
平滑锚点跳转[支持新窗口打开的页面]
www.planeArt.cn
2009.08.25
*/

//页面加载完成执行函数
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
allLinks();//绑定链接
pageInit();//获取锚点参数执行跳转
});

// 转换为数字
function intval(v){
v = parseInt(v);
return isNaN(v) ? 0 : v;
}

// 获取元素信息
function getPos(e){
var l = 0;
var t = 0;
var w = intval(e.style.width);
var h = intval(e.style.height);
var wb = e.offsetWidth;
var hb = e.offsetHeight;
while (e.offsetParent){
l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
t += e.offsetTop + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);
e = e.offsetParent;
}
l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
t += e.offsetTop + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);
return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};
}

// 获取滚动条信息
function getScroll() {
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
} else if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
return { t: t, l: l, w: w, h: h };
}

// 滚动
var $sr=1;//防止同时执行多个跳转
function scroller(el, duration){
if(typeof el != ‘object’) { el = document.getElementById(el); }
if(!el) return;
var z = this;
z.el = el;
z.p = getPos(el);
z.s = getScroll();
z.clear = function(){window.clearInterval(z.timer);z.timer=null};
z.t=(new Date).getTime();
z.step = function(){
var t = (new Date).getTime();
var p = (t – z.t) / duration;
if (t >= duration + z.t) {
z.clear();
window.setTimeout(function(){z.scroll(z.p.y, z.p.x)},13);
$sr=1;
} else {
st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;
sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l;
z.scroll(st, sl);
}
};
z.scroll = function (t, l){window.scrollTo(l, t)};
z.timer = window.setInterval(function(){z.step();},13);
$sr=0;
}

//给页面锚点添加额外的参数
function goAnchor(href,target){
u=href.split(“#”);
if (target==”) target=’_self’;
if (target==’_self’ && $sr==1) scroller(u[1],800);
window.open(u[0] + ‘#anchor=’ + u[1],target=target);
}
function allLinks(){
var allLinks = document.getElementsByTagName(‘a’);
for (var i=0;i
var lnk = allLinks[i];
if ((lnk.href && lnk.href.indexOf(‘#’) != -1)) {
lnk.onclick=function(evt){
if ($sr==1) goAnchor(this.href,this.target);
return false;
}
}
}
}

//接收页面锚点参数执行平滑跳转
function pageInit(){
hash=window.location.hash.split(“#anchor=”);
scroller(hash[1],800);
}