特色栏目： python 批处理 net编程 Javascript Php Asp Css Html5 Android seo centos

用Javascript实现锚点(Anchor)间平滑跳转

来源：互联网收集：自由互联发布时间：2023-07-02

锚点(Anchor)相信很多人都不陌生它方便访问者在页面的不同位置快速跳转直接找到自己感兴趣的内容如果说RSS是整个网站的摘要它方便访问者在页面的不同位置快速跳转直接找到自己感兴

锚点(Anchor)相信很多人都不陌生它方便访问者在页面的不同位置快速跳转直接找到自己感兴趣的内容如果说RSS是整个网站的摘要它方便访问者在页面的不同位置快速跳转直接找到自己感兴趣的内容如果说 RSS 是整个网站的摘要那锚点就是一个页面的摘要通常一个页面内容很多的时候都会用锚点来定位。

但是锚点也有个问题通常点击锚点后页面会立即跳到目标位置而本文介绍的方法实现了锚点(Anchor)间平滑跳转效果非常不错。

// 说明用 Javascript 实现锚点(Anchor)间平滑跳转

// 来源 ThickBox 2.1

// 整理 Yanfu Xie [xieyanfuyahoo.com.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;

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.timernull};

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);

}

调用方式

scroller(el, duration)

el : 目标锚点 ID

duration : 持续时间以毫秒为单位越小越快

HTML:

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;

}

header_1 --> header_4

header_2 --> header_5

header_3 --> header_6

header_4 --> header_7

header_5 --> header_3

header_6 --> header_2

header_7 --> header_1

测试代码

用 Javascript 实现锚点(Anchor)间平滑跳转 - 平滑, 锚点, Anchor, 跳转, 滚动, Javascript,