但是锚点也有个问题，通常点击锚点后，页面会立即跳到目标位置，而本文介绍的方法，实现了锚点(Anchor)间平滑跳转，效果非常不错。
复制代码 代码如下:
调用方式：
复制代码 代码如下:
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)间平滑跳转
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
返回 首页
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
返回 首页
