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 相关文章推荐
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
vue-cli3单页构建大型项目方案
Apr 07 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 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
一个捕获函数输出的函数
2007/02/14 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
浅谈json_encode用法
2015/03/05 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
DOM 事件流详解
2015/01/20 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
python3 字符串知识点学习笔记
2020/02/08 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
各营销点岗位职责范本
2014/03/05 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书