脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript 锚点错位

javascript 动态数据下的锚点错位问题解决方法

 更新时间：2008年12月24日 23:22:20   作者：  
用 Javascript 实现锚点(Anchor)间平滑跳转
复制代码 代码如下:

<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>
您可能感兴趣的文章:

相关文章

  • js+html5生成自动排列对话框实例

    js+html5生成自动排列对话框实例

    这篇文章主要介绍了js+html5生成自动排列对话框实例，弹出多个对话框，可以自动排列，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 利用javascript如何随机生成一定位数的密码

    利用javascript如何随机生成一定位数的密码

    这篇文章主要给大家介绍了关于利用javascript如何随机生成一定位数的密码的相关资料，文中给出了详细的示例代码，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-09-09
  • 微信小程序实现上传word、txt、Excel、PPT等文件功能

    微信小程序实现上传word、txt、Excel、PPT等文件功能

    这篇文章主要为大家详细介绍了微信小程序实现上传word、txt、Excel、PPT等文件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-05-05
  • js和jquery中获取非行间样式

    js和jquery中获取非行间样式

    本篇文章主要介绍了js和jquery中获取非行间样式的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-05-05
  • JavaScript常用截取字符串的三种方式用法区别实例解析

    JavaScript常用截取字符串的三种方式用法区别实例解析

    本文给大家分享JavaScript常用截取字符串的三种方式及每种用法的区别解析，感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-05-05
  • JavaScript将取代AppleScript？

    JavaScript将取代AppleScript？

    这篇文章主要介绍了JavaScript将取代AppleScript？AppleScript是OS X平台的类似JavaScript的脚本语言,需要的朋友可以参考下
    2014-09-09
  • 全面解析Bootstrap中tab（选项卡）的使用方法

    全面解析Bootstrap中tab（选项卡）的使用方法

    这篇文章主要为大家全面解析Bootstrap中tab（选项卡）的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • FF和IE之间7个JavaScript的差异

    FF和IE之间7个JavaScript的差异

    尽管 JavaScript 历史上使用冗长而令人生厌的代码块来标的特定浏览器的时期已经结束了，但是偶尔使用一些简单的代码块和对象检测来确保一些代码在用户机器上正常工作依然是必要的。
    2009-05-05
  • javascript封装 Cookie 应用接口

    javascript封装 Cookie 应用接口

    本文通过几个简单的示例向大家展示了javascript封装cookie的注意事项及操作方法，非常的简单实用，最后附上一则具体实例，有需要的小火把可以参考下。
    2015-08-08
  • Javascript实现找不同色块的游戏

    Javascript实现找不同色块的游戏

    先给大家说下游戏规则：在变化数量的颜色块里找出一个不同颜色的块点击。下面通过js代码给大家分享找不同色块的游戏实现方法，需要的朋友参考下吧
    2017-07-07

最新评论