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

代码如下:

<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>

赞 (0)

相关推荐

  • JavaScript for in锚点的动态创建

    测试for..in ") ; } //--> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] <!--锚点的使用--> test anchor 跳转目标对象处 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] //状态栏文字的滚动 测试状态栏字符的滚动 = msg.length) { seq = 0 ; window.status = "" ; window.setTimeout("scrollStr();",int

  • js 定位到某个锚点的方法

    html页面内可以设置锚点,锚点定义 Html代码  <a name="firstAnchor">&nsbp;</a> 锚点使用 Html代码 <a href="#firstAnchor">跳至第一个锚点</a> 但对于js呢,在js中如何在完成一个操作后跳至页面的某个固定锚点呢 js中location.href可以跳转至某个url: 跳至(定位到)某个固定锚点的办法 1.location.href = &qu

  • JS如何实现在页面上快速定位（锚点跳转问题）

    本文介绍了JS如何实现在页面上快速定位(锚点跳转问题),分享给大家,具体如下: 1. 锚点跳转简介 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到. 锚点跳转有两种形式: a标签 + name / href 属性 使用标签的id属性 在html 4.0以前,只有使用 <a> 标签的 name 属性才能创建片段标识符.id 属性的出现,使所有 HTML 或 XHTML 元素都可以是片段标识符.这是因为 id 标识符几乎可以用在所有的标签中.<a> 标签为了能够

  • JavaScript组件焦点与页内锚点间传值的方法

    JavaScript组件焦点与页内锚点间传值的方法

    本文实例讲述了JavaScript组件焦点与页内锚点间传值的方法.分享给大家供大家参考.具体分析如下: 上述的这两个小功能在一些新式的手机页面是很有用的. 如何光标放上输入框就触发事件,离开输入框就触发另一个事件呢?即使用户不输入任何东西-- 页间传值很简单,但在页内的锚点之间是如何传值呢? 一.基本目标 有一个页面,上面有一个输入框,一个超级链接,这两个东西是没有任何关联的, 只是因为功能不大,所以把两个功能合起来写 1.输入框功能 一旦把光标放上对话框背景就变成红色,一旦用户的鼠标点击其他地

  • JS锚点的设置与使用方法

    JS锚点的设置与使用方法

    本文实例讲述了JS锚点的设置与使用方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>锚点</title> </head> <body> <ul> <li><a href="javascript:vo

  • JavaScript返回网页中锚点数目的方法

    本文实例讲述了JavaScript返回网页中锚点数目的方法.分享给大家供大家参考.具体如下: JavaScript返回网页中锚点的数目,下面的JS代码获取页面中的anchor数量 <!DOCTYPE html> <html> <body> <a name="html">HTML Tutorial</a><br> <a name="css">CSS Tutorial</a>

  • js 模仿锚点定位的实现方法

    如下所示: <div class="designer-bg ov"> <div class="w-77 f-l designer-nav"> <ul id="scroll_nav"> <li class="designer-nav-li"><a href="" title="" data-nav="a">A

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

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>用 Javascript 实现锚点(Anchor)间平滑跳转</title> <script language="javascript"> // 说明 :用 Javascript 实现锚点(Anchor)间平滑跳转 //

  • JavaScript动态创建link标签到head里的方法

    本文实例讲述了JavaScript动态创建link标签到head里的方法.分享给大家供大家参考.具体分析如下: 相信有很多做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签--link标签.这里我们就来说说如何在浏览器中动态创建link标签. 使用 jQuery 创建 link 标签 如果你开发中喜欢用jQuery,那么用jQuery在创建link标签应该是这样的: 复制代码 代码如下: var cssURL = '/style.css',     linkTag = $('<l

  • javascript在IE下trim函数无法使用的解决方法

    本文实例分析了javascript在IE下trim函数无法使用的解决方法,对于web前段设计有一定的借鉴价值.具体分析如下: 首先,javascript的trim函数在firefox下面使用没有问题: <script language="javascript"> var test1 = " aa "; test1 = test1.toString(); test1 = test1.trim(); </script> 在火狐下这样用没有问题,

  • ubuntu 安装linux 下vmVMware tools 步骤及问题解决方法

    一. 菜单栏 "虚拟机" --> "设置 " 使用linux.so镜像文件 此文件在vmware workstation 的安装目录.并且打开CD/DVD的连接. 二.终端执行如下命令 mount /dev/cdrom /mnt/cdrom 挂载 cd /mnt/cdrom cp VMwareXXX.tar.gz /tmp VMwareXXX.tar.gz 为自己vmware tools安装包, 复制到/tmp 目录下 umount /mnt/cdrom 解除

  • 详解用pyecharts Geo实现动态数据热力图城市找不到问题解决

    pyecharts 是一个用于生成 Echarts 图表的类库. Echarts 是百度开源的一个数据可视化 JS 库.主要用于数据可视化. 本文主要是用pycharts中的Geo绘制中国地图,在图中显示出各个地区的人均销售额 传入的数据形如:[('上海',30), ('北京',50), ... ...] li=[] for i,row in filtered.iterrows(): li.append((row['city'],int(row['per_capita']))) geo = Ge

  • php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总

    从旧版升级到php5.4,恐怕最麻烦的就是htmlspecialchars这个问题了!当然,htmlentities也会受影响,不过,对于中文站来说一般用htmlspecialchars比较常见,htmlentities非常少用到. 可能老外认为网页普遍应该是utf-8编码的,于是苦了那些用GB2312,GBK编码的中文站......! 具体表现: 复制代码 代码如下: $str = "9enjoy.com的php版本是5.2.10"; echo htmlspecialchars($s

  • Javascript无参数和有参数类继承问题解决方法

    说到Javascript的类继承,就必然离不开原型链,但只通过原型链实现的继承有着不少缺陷. 无参数类继承的问题 先看一段示例代码,实现B继承于A: 复制代码 代码如下: function A() { } A.prototype.a1 = function() { }; function B() { } B.prototype = new A(); B.prototype.b1 = function() { }; var b = new B(); alert(b.constructor == A

  • javascript在子页面中函数无法调试问题解决方法

    近期在做一个项目,会遇到在子页面中提交的时候会无法能够调试javascript代码的情况出现,有时候这种问题,我们无法正常在浏览器,看到我们子页面的javascript代码,所以只能够用原始的alert 或者 console.log(),当然,这也是一种解决方法,但是有时候,我们就想看一下程序到底是如何运行的,同时也可以看每个参数到底是什么值,所以意义还是比较大的. 我贴张图,大家就大概了解是什么时候会出现这个问题了. 复制代码 代码如下: <script> function stopWatc

  • Window下adb shell中文乱码问题解决方法

    Window下,进行adb shell后,举个例子,如果你的sdcard下保存着中文字符文件名的文件,则在CMD下显示是一些无规律的中文并夹杂着乱码. 出现这种情况的原因是: Android中使用的是UTF-8字符,而CMD默认字符集是ANSI,中文环境下即为GBK,代码页为936.查询当前代码页的方法为在CMD下直接输入"chcp"命令,并会返回"活动的代码页:936"字样.找出原因了,解决办法也就有了. 只要使用UTF-8格式的代码页65001就OK了,命令如下

  • jquery动态改变onclick属性导致失效的问题解决方法

    复制代码 代码如下: <li id="" onclick =""></li> 虽然在很多时候,都是非常不推荐这样写的,但是还有有些时候会碰到这样的代码. 那么你可能在某些时候需要去修改onclick 的属性如下: 复制代码 代码如下: $("#id").attr("onclick",url); 这样的代码,在chrome和firefox 中可以得到你想要的结果. 遗憾的是在ie中,至少是ie7 以下是没

随机推荐