[页面定位]锚的简单使用
1.使用window.location.hash定位到指定的锚
2.用 Javascript 实现锚点(Anchor)间平滑跳转
锚点(Anchor)相信很多人都不陌生，它方便访问者在页面的不同位置快速跳转，直接找到自己感兴趣的内容，如果说 RSS 是整个网站的摘要，那锚点就是一个页面的摘要，通常一个页面内容很多的时候，都会用锚点来定位。
但是锚点也有个问题，通常点击锚点后，页面会立即跳到目标位置，而本文介绍的方法，实现了锚点(Anchor)间平滑跳转，效果非常不错。
--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------
Javascript:
-
-
<script type=
"text/javascript">
-
-
// 说明 ：用 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
);
-
}
-
-
</script>
-
调用方式：
Code:
scroller(el, duration)
el : 目标 锚点 ID
duration : 持续时间，以毫秒为单位，越小越快
HTML:
-
-
<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>
-
-
<div class="test">
-
<a name="header_1" id="header_1">
</a>
-
<strong onclick="javascript:scroller('header_4', 800);">header_1 --> header_4
</strong>
-
<p>
</p>
-
</div>
-
-
<div class="test">
-
<a name="header_2" id="header_2">
</a>
-
<strong onclick="javascript:scroller('header_5', 800);">header_2 --> header_5
</strong>
-
<p>
</p>
-
</div>
-
-
<div class="test">
-
<a name="header_3" id="header_3">
</a>
-
<strong onclick="javascript:scroller('header_6', 800);">header_3 --> header_6
</strong>
-
<p>
</p>
-
</div>
-
-
<div class="test">
-
<a name="header_4" id="header_4">
</a>
-
<strong onclick="javascript:scroller('header_7', 800);">header_4 --> header_7
</strong>
-
<p>
</p>
-
</div>
-
-
<div class="test">
-
<a name="header_5" id="header_5">
</a>
-
<strong onclick="javascript:scroller('header_3', 800);">header_5 --> header_3
</strong>
-
<p>
</p>
-
</div>
-
-
<div class="test">
-
<a name="header_6" id="header_6">
</a>
-
<strong onclick="javascript:scroller('header_2', 800);">header_6 --> header_2
</strong>
-
<p>
</p>
-
</div>
-
-
<div class="test">
-
<a name="header_7" id="header_7">
</a>
-
<strong onclick="javascript:scroller('header_1', 800);">header_7 --> header_1
</strong>
-
<p>
</p>
-
</div>
-
1308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
