javascript 动态数据下的锚点错位问题解决方法


Posted in Javascript onDecember 24, 2008
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>用 Javascript 实现锚点(Anchor)间平滑跳转</title> 

<script language="javascript"> 

// 说明 :用 Javascript 实现锚点(Anchor)间平滑跳转 

 

// 转换为数字 

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-20)};
 

 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> 
</head> 
<body> 

<form id="form1" runat="server"> 

<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> 

</form> 
</body> 
</html>
Javascript 相关文章推荐
js+css在交互上的应用
Jul 18 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
js常用代码段整理
Nov 30 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 Javascript
javascript 网页跳转的方法
Dec 24 #Javascript
javascript prototype,executing,context,closure
Dec 24 #Javascript
JavaScript 事件参考手册
Dec 24 #Javascript
javascript XML数据显示为HTML一例
Dec 23 #Javascript
window.location和document.location的区别分析
Dec 23 #Javascript
javascript 硬盘序列号+其它硬件信息
Dec 23 #Javascript
js 解决“options为空或不是对象”
Dec 22 #Javascript
You might like
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
js切换光标示例代码
2013/10/10 Javascript
js document.write()使用介绍
2014/02/21 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
使用Scrapy爬取动态数据
2018/10/21 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
高校毕业生登记表自我鉴定
2013/11/03 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
八项规定对照检查材料
2014/08/31 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
趣味运动会标语口号
2015/12/26 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
什么是SOLID
2022/03/24 Javascript