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 相关文章推荐
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
详解Vite的新体验
2021/02/22 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Python获取当前路径实现代码
2017/05/08 Python
Python命令行解析模块详解
2018/02/01 Python
python用户管理系统
2018/03/13 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
24式加速你的Python(小结)
2019/06/13 Python
Python实现自动装机功能案例分析
2020/10/22 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
如何将整数int转换成字串String
2014/03/21 面试题
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
财务部经理岗位职责
2014/02/03 职场文书
2014年保育员工作总结
2014/12/02 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
合理化建议书范文
2015/09/14 职场文书
Python中的pprint模块
2021/11/27 Python