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 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
兼容ie和firefox js关闭代码
Dec 11 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 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去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
javascript基本语法
2016/05/31 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
Python简明入门教程
2015/08/04 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
关于python中remove的一些坑小结
2021/01/04 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
销售实习自我鉴定
2013/12/07 职场文书
大学本科生的个人自我评价
2013/12/09 职场文书
应届毕业生求职信范文分享
2013/12/26 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
医院护士工作检讨书
2014/10/26 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
基于python的matplotlib制作双Y轴图
2021/04/20 Python