首页
所有分类
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 相关文章推荐
云网广告中的代码，提示出错，大家找找
Nov 21 Javascript
将函数的实际参数转换成数组的方法
Jan 25 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
利用jQuery.Validate异步验证用户名是否存在（推荐）
Dec 09 Javascript
微信小程序 后台登录（非微信账号）实例详解
Mar 31 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
Typescript3.9 常用新特性一览(推荐)
May 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
触发器(3) Hash(1) IOC(3) metaclass(1) 数据类型(8) XML(1) Bean(3) 入门基础(1) 自动化(1) Geospatial(1)
You might like
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
php判断表是否存在的方法
2015/06/18 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
JavaScript运算符小结
2015/06/03 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
深入了解python中元类的相关知识
2019/08/29 Python
Django之PopUp的具体实现方法
2019/08/31 Python
python实现tail -f 功能
2020/01/17 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
专注澳大利亚特产和新西兰特产的澳洲中文网：0061澳洲制造
2019/03/24 全球购物
贯彻学习两会心得体会范文
2014/03/17 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
运动会主持人开幕词
2016/03/04 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
webpack的移动端适配方案小结
2021/07/25 Javascript