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

Javascript
JS+XML 省份和城市之间的联动实现代码
ie与firefox下的event使用说明与详细区别
Jquery 学习笔记（二）
jQuery技巧大放送 学习jquery的朋友可以看下
使用jQuery简化Ajax开发 Ajax开发入门
jQuery入门 构造函数
JavaScript iframe的相互操作浅析
JavaScript null和undefined区别分析
JavaScript 替换Html标签实现代码
jQuery 标题的自动翻转实现代码
JavaScript读取中文cookie时的乱码问题的解决方法
JavaScript 动态创建VML的方法
JavaScript Array扩展实现代码
javascript线性渐变一
javascript 线性渐变二
javascript 线性渐变三
滑动门式菜单 实现代码
extjs 学习笔记（三） 最基本的grid
javascript 操作cookies及正确使用cookies的属性
JavaScript 基础知识 被自己遗忘的

No. « 261 262 263 264 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 198 ::
收藏到网摘: 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>