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设计模式 接口介绍
Jul 24 Javascript
javascript动态加载三
Aug 22 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 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对数组排序的简单实例
2013/12/25 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
python绘制彩虹图
2019/12/16 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
Python实现不规则图形填充的思路
2020/02/02 Python
Python之变量类型和if判断方式
2020/05/05 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
班主任对学生的评语
2014/04/26 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
舞蹈专业求职信
2014/06/13 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL