首页
所有分类
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 相关文章推荐
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
vue-router单页面路由
Jun 17 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 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
字符集(1) data(4) 数据表(1) Vscode(3) 神经网络(7) OVERLORD(1) mysql(6) SSH(3) character(1) 2022年7月新番(1)
You might like
PHP数据库开发知多少
2006/10/09 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
prototype1.4中文手册
2006/09/22 Javascript
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
Python模拟登录12306的方法
2014/12/30 Python
Python中的hypot()方法使用简介
2015/05/18 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
维德科技C#面试题笔试题
2015/12/09 面试题
业务主管岗位职责范本
2013/12/25 职场文书
服装发布会策划方案
2014/05/22 职场文书
团队拓展活动总结
2014/08/27 职场文书
学习教师法的心得体会
2014/09/03 职场文书
大学生实习证明范文（5篇）
2014/09/18 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript