最近工作的原因，需要在android平台上，使用webview来打开html文件，在html文件中，存在锚点，而我使用的平台或者可能是webview本身对锚点支持不太好，我使用js来代替html中的锚点链接，这样达到了对锚点很好的支持。
首先，html锚点的方法有两种，使用id和name访问，如下：
<html>
<body>
<p>
<a href="#method1">页面锚点方法一</a>
</p>
<p>
<a href="#method2">页面锚点方法二</a>
</p>
<h2><a name="method1">方法一</a></h2>
<p>使用锚标签的 href 和 name 属性</p>
<h2 id="method2">方法二</h2>
<p>使用锚标签和 id 属性</p>
</body>
</html>
但使用以上 2种办法会在webview中会出现点击无法跳到锚点处的现象。
使用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. // 锚点(Anchor)间平滑跳转
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. }
具体使用方法：glide(anchorid, millisecond)
其中，anchorid为锚点的 id，millisecond为移动到指定锚点的毫秒数。
html中使用js：
<a οnclick="glide(md2, 1)" ><h2>use js to go to md2</h2></a>
html中使用name：
<a href="#jump-test" ><h2>use name to go to md1</h2></a>
html中使用id：
<a href="#md2"><h2>use id to go to md2</h2></a>
参考：http://shjy-nicholas.javaeye.com/blog/161247
http://magicalboy.com/html-named-anchors.html#method2
183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
