首页
所有分类
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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
Javascript 错误处理的几种方法
Jun 13 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
select自定义小三角样式代码（实用总结）
Aug 18 Javascript
layui清除radio的选中状态实例
Nov 14 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
pandas(7) agg(1) apply(1) 音频(1) 数组(5) 数据保存(1) 矩阵(1) bs4(1) mp3Play(1) 读取(1)
You might like
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
php自定义时间转换函数示例
2016/12/07 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
swiper自定义分页器使用方法详解
2020/09/14 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
python实现支付宝转账接口
2019/05/07 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
python 发送get请求接口详解
2020/11/17 Python
flask项目集成swagger的方法
2020/12/09 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
一些高难度的SQL面试题
2016/11/29 面试题
DTD的含义以及作用
2014/01/26 面试题
销售文员岗位职责
2013/11/29 职场文书
财务管理专业求职信
2014/06/11 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
初中美术教学反思
2016/02/17 职场文书
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis