惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Latest news
Latest news
T
Troy Hunt's Blog
V
Vulnerabilities – Threatpost
L
LINUX DO - 热门话题
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Simon Willison's Weblog
Simon Willison's Weblog
V
V2EX
博客园 - 司徒正美
B
Blog RSS Feed
AWS News Blog
AWS News Blog
MyScale Blog
MyScale Blog
Scott Helme
Scott Helme
Cisco Talos Blog
Cisco Talos Blog
Last Week in AI
Last Week in AI
NISL@THU
NISL@THU
博客园 - Franky
P
Proofpoint News Feed
博客园_首页
C
CERT Recently Published Vulnerability Notes
雷峰网
雷峰网
S
Schneier on Security
P
Proofpoint News Feed
Hugging Face - Blog
Hugging Face - Blog
G
GRAHAM CLULEY
博客园 - 三生石上(FineUI控件)
月光博客
月光博客
WordPress大学
WordPress大学
The Hacker News
The Hacker News
T
Threatpost
阮一峰的网络日志
阮一峰的网络日志
A
Arctic Wolf
Microsoft Azure Blog
Microsoft Azure Blog
T
The Exploit Database - CXSecurity.com
Engineering at Meta
Engineering at Meta
罗磊的独立博客
T
The Blog of Author Tim Ferriss
D
Darknet – Hacking Tools, Hacker News & Cyber Security
I
Intezer
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
K
Kaspersky official blog
SecWiki News
SecWiki News
云风的 BLOG
云风的 BLOG
美团技术团队
C
Cybersecurity and Infrastructure Security Agency CISA
博客园 - 【当耐特】
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Security Latest
Security Latest
C
Cyber Attacks, Cyber Crime and Cyber Security
B
Blog
S
Security Affairs

博客园 - 田了你

[ZF]开心一下 [转]Java jdbc数据库连接池总结! 一台机器部署N个server步骤 [转]软件开发者面试百问 09年的第一篇日志比已往的时候来得更早一些 - 田了你 - 博客园 从今天开始每天写一篇日志咯 Telerik RadGrid 翻页问题解决 - 田了你 果然是本命年 javascript注册事件的四种方式 - 田了你 - 博客园 Tomcat5.x的项目部署 又被老板欺骗了 .net的优点变缺点(郁闷了一天) 2007.2.1 -----2007.4.1安排计划 关于NTKO_office的操作(从数据库中提取数据,写入到NTKO_office_Word中) [转]JS代码格式化工具(附源代码) 层的拖动 获得控件在页面上的绝对位置的方法 解决SQL2000乱码问题 ref与out
[转]关于锚点 - 田了你 - 博客园
田了你 · 2008-11-27 · via 博客园 - 田了你

关键字: 锚点 平滑 定位

对于定位到一个锚点,最常见的方法就是在url后面加上“#和锚点的name值”, 
下面先介绍一种如何采用Javascript定位锚点的方法: 
window.location.hash="anchorname" 
比如一个锚点:<a name="anchor1"></a> 
那么采用window.location.hash="anchor1"就可以定位到锚点处。 

下面介绍一种平滑移动到指定锚点的方法,此方法是采自ThickBox: 
js代码:

Js代码 复制代码

  1.   
  2. function intprase(v){  
  3.     v = parseInt(v);  
  4.     return isNaN(v) ? 0 : v;  
  5. }  
  6.   
  7.   
  8. function getInfo(e){  
  9.     var l = 0;  
  10.     var t = 0;  
  11.     var w = intprase(e.style.width);  
  12.     var h = intprase(e.style.height);  
  13.     var wb = e.offsetWidth;  
  14.     var hb = e.offsetHeight;  
  15.     while (e.offsetParent) {  
  16.         l += e.offsetLeft + (e.currentStyle ? intprase(e.currentStyle.borderLeftWidth) : 0);  
  17.         t += e.offsetTop + (e.currentStyle ? intprase(e.currentStyle.borderTopWidth) : 0);  
  18.         e = e.offsetParent;  
  19.     }  
  20.     l += e.offsetLeft + (e.currentStyle ? intprase(e.currentStyle.borderLeftWidth) : 0);  
  21.     t += e.offsetTop + (e.currentStyle ? intprase(e.currentStyle.borderTopWidth) : 0);  
  22.     return {  
  23.         x: l,  
  24.         y: t,  
  25.         w: w,  
  26.         h: h,  
  27.         wb: wb,  
  28.         hb: hb  
  29.     };  
  30. }  
  31.   
  32.   
  33. function getScroll(){  
  34.     var t, l, w, h;  
  35.     if (document.documentElement && document.documentElement.scrollTop) {  
  36.         t = document.documentElement.scrollTop;  
  37.         l = document.documentElement.scrollLeft;  
  38.         w = document.documentElement.scrollWidth;  
  39.         h = document.documentElement.scrollHeight;  
  40.     }  
  41.     else   
  42.         if (document.body) {  
  43.             t = document.body.scrollTop;  
  44.             l = document.body.scrollLeft;  
  45.             w = document.body.scrollWidth;  
  46.             h = document.body.scrollHeight;  
  47.         }  
  48.     return {  
  49.         t: t,  
  50.         l: l,  
  51.         w: w,  
  52.         h: h  
  53.     };  
  54. }  
  55.   
  56.   
  57. function glide(el, duration){  
  58.     if (typeof el != 'object') {  
  59.         el = document.getElementById(el);  
  60.     }  
  61.     if (!el)   
  62.         return;  
  63.     var z = this;  
  64.     z.el = el;  
  65.     z.p = getInfo(el);  
  66.     z.s = getScroll();  
  67.     z.clear = function(){  
  68.         window.clearInterval(z.timer);  
  69.         z.timer = null  
  70.     };  
  71.     z.t = (new Date).getTime();  
  72.     z.step = function(){  
  73.         var t = (new Date).getTime();  
  74.         var p = (t - z.t) / duration;  
  75.         if (t >= duration + z.t) {  
  76.             z.clear();  
  77.             window.setTimeout(function(){  
  78.                 z.scroll(z.p.y, z.p.x)  
  79.             }, 13);  
  80.         }  
  81.         else {  
  82.             st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.y - z.s.t) + z.s.t;  
  83.             sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.x - z.s.l) + z.s.l;  
  84.             z.scroll(st, sl);  
  85.         }  
  86.     };  
  87.     z.scroll = function(t, l){  
  88.         window.scrollTo(l, t)  
  89.     };  
  90.     z.timer = window.setInterval(function(){  
  91.         z.step();  
  92.     }, 13);  
  93. }  

经过测试,这段JS代码在IE和FF中均可运行。

具体使用方法:glide(anchorid, millisecond)

其中,anchorid为锚点的id,millisecond为移动到指定锚点的毫秒数。