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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
Puppet的一些技巧
Sep 17 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
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
全文搜索和替换
2006/10/09 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
javascript 学习之旅 (3)
2009/02/05 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
js实现九宫格拼图小游戏
2017/02/13 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
Python shelve模块实现解析
2019/08/28 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
运动会100米解说词
2014/01/23 职场文书
校园之声广播稿
2014/01/31 职场文书
给学校的建议书范文
2014/05/15 职场文书
社区先进事迹材料
2014/05/19 职场文书
销售顾问工作计划书
2014/08/15 职场文书
受资助学生感谢信
2015/01/21 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript