(转)JS实现锚点
test.js
// 说明 ：用 Javascript 实现锚点(Anchor)间平滑跳转// 来源 ：ThickBox 2.1// 整理 ：Yanfu Xie [xieyanfu@yahoo.com.cn]// 网址 ：http://www.codebit.cn// 日期 ：07.01.17 // 转换为数字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 };} // 锚点(Anchor)间平滑跳转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);} 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);}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>test</title><script type="text/javascript" src="test.js"></script><style type="text/css">div.test {width: 400px;margin: 5px auto;border: 1px solid #ccc;}div.test strong {font-size: 16px;background: #fff;border-bottom: 1px solid #aaa;margin: 0;display: block;padding: 5px 0;text-decoration: underline;color: #059B9A;cursor: pointer;}div.test p {height: 400px;background: #f1f1f1;margin: 0;}</style></head><body><div id="header_1"></a><strong onclick="javascript:scroller('header_4', 800);">header_1--> header_4</strong><p></p></div><div id="header_2"></a><strong onclick="javascript:scroller('header_5', 800);">header_2--> header_5</strong><p></p></div><div id="header_3"></a><strong onclick="javascript:scroller('header_6', 800);">header_3--> header_6</strong><p></p></div><div id="header_4"></a><strong onclick="javascript:scroller('header_7', 800);">header_4--> header_7</strong><p></p></div><div id="header_5"></a><strong onclick="javascript:scroller('header_3', 800);">header_5--> header_3</strong><p></p></div><div id="header_6"></a><strong onclick="javascript:scroller('header_2', 800);">header_6--> header_2</strong><p></p></div><div id="header_7"></a><strong onclick="javascript:scroller('header_1', 800);">header_7--> header_1</strong><p></p></div></body></html>