当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用Javascript实现锚点(Anchor)间平滑跳转

Javascript
用JavaScript实现浏览器地震效果
Javascript实例教程(8) 利用Javascript基于浏览器类型的重定向
Javascript实例教程(14) 鼠标触发窗口
使主页呈现“飞舞”特效
Javascript实例教程(21) OLE Automation(1)
Javascript实例教程(13) 鼠标移过时报警
Javascript实例教程(10) 随机显示图片
Javascript实例教程(2) 创建弹出式窗口
JavaScript 小技巧(第十集)
Javascript实例教程(3) 创建折叠式导航菜单
Javascript实例教程(7) 利用Javascript进行密码保护
完美解决一个事件激活多个函数(2)
Javascript模拟游戏中的弹出菜单效果
Javascript实例教程(6) 在一个表单中设置和检查Cookies
JavaScript 小技巧(第八集)
Javascript实例教程(4) 探测浏览器插件
JavaScript 小技巧(第九集)
JavaScript学习:基础继承机制
初学Javascript之cookie篇(译)
让弹出窗口变得“体贴”一些(javascript)

No. « 10 11 12 13 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 166 ::
收藏到网摘: n/a

本文介绍的方法，实现了锚点(Anchor)间平滑跳转，效果非常不错。 锚点(Anchor)相信很多人都不陌生，它方便访问者在页面的不同位置快速跳转，直接找到自己感兴趣的内容，如果说 RSS 是整个网站的摘要，那锚点就是一个页面的摘要，通常一个页面内容很多的时候，都会用锚点来定位。
但是锚点也有个问题，通常点击锚点后，页面会立即跳到目标位置，而本文介绍的方法，实现了锚点(Anchor)间平滑跳转，效果非常不错。
复制代码 代码如下:

<script type="text/javascript">
// 说明 ：用 Javascript 实现锚点(Anchor)间平滑跳转
// 来源 ：ThickBox 2.1
// 整理 ：Yanfu Xie [[email protected]]
// 日期 ：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>

调用方式：
复制代码 代码如下:

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>

测试代码：
复制代码 代码如下:

<!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" />
<meta name="keywords" content="平滑, 锚点, Anchor, 跳转, 滚动, javascript, " />
<meta name="description" content="锚点(Anchor)相信很多人都不陌生，它方便访问者在页面的不同位置快速跳转，直接找到自己感兴趣的内容，如果说 RSS 是整个网站的摘要，那锚点就是一个页面的摘要，通常一个页面内容很多的时候，都会用锚点来定位。" />
<title>用 Javascript 实现锚点(Anchor)间平滑跳转 - 平滑, 锚点, Anchor, 跳转, 滚动, javascript, </title>
<link rel="stylesheet" href="/admin/tpl/default/css/pub_example.css" type="text/css" />
</head>
<body>
<div class="ad">
</div>
<br />
<div id="example">
<h3 id="example_title">用 Javascript 实现锚点(Anchor)间平滑跳转</h3>
<div id="example_main">

<!--************************************* 实例代码开始 *************************************-->
<script type="text/javascript">
// 说明 ：用 Javascript 实现锚点(Anchor)间平滑跳转
// 来源 ：ThickBox 2.1
// 整理 ：Yanfu Xie [[email protected]]
// 日期 ：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>
<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>
<!--************************************* 实例代码结束 *************************************-->

</div>
<div id="back"><a href="http://www.ruanchen.com">返回 首页</a></div>
</div>
<br />
<div class="ad">
</div>
</body>
</html>