首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 08, 2009

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

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

<script type="text/javascript"> 
// 说明 ：用 Javascript 实现锚点(Anchor)间平滑跳转 
// 来源 ：ThickBox 2.1 
// 整理 ：Yanfu Xie [xieyanfu@yahoo.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) { 
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 [xieyanfu@yahoo.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) { 
        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="https://3water.com">返回 首页</a></div> 
</div> 
<br /> 
<div class="ad"> 
</div> 
</body> 
</html>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
Bootstrap3 图片（响应式图片&amp;图片形状）
Jan 04 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
vue 和vue-touch 实现移动端左右导航效果（仿京东移动站导航）
Apr 22 Javascript
Vuex入门到上手教程
Jun 20 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
JS面向对象编程基础篇（三） 继承操作实例详解
Mar 03 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
JavaScript动态生成表格的示例
Nov 02 Javascript
JS数组的常用方法整理
Mar 31 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 #Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 #Javascript
Javascript String.replace的妙用
Sep 08 #Javascript
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 #Javascript
javascript 流畅动画实现原理
Sep 08 #Javascript
javascript 定义初始化数组函数
Sep 07 #Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 #Javascript
CPU(2) 纸巾盒(1) ICF-F10(1) 爱尔兰购物网站(30) 德生G88(1) 德生1994(1) AE3805(1) 香港购物网站(84) SLi Minor 2020(63) 天梯图(1)
You might like
TMDPHP 模板引擎使用教程
2012/03/13 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
javascript的几种写法总结
2016/09/30 Javascript
Angularjs中三种数据的绑定策略(“@”，“=”，“&amp;”)
2016/12/23 Javascript
node.js平台下利用cookie实现记住密码登陆（Express+Ejs+Mysql）
2017/04/26 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
纯python实现机器学习之kNN算法示例
2018/03/01 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
利用python修改json文件的value方法
2018/12/31 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
Python如何实现强制数据类型转换
2019/11/22 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
电子商务专业自我鉴定
2013/12/18 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
质量承诺书怎么写
2014/05/24 职场文书
就业协议书范本
2014/10/08 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
你知道Java Spring的两种事务吗
2022/03/16 Java/Android