For the reason of recent work, you need to use webview on the Android platform to open HTML files. In HTML files, there is an anchor, however, the platform I use may be that webview itself does not support the anchor very well. I use js to replace the anchor link in HTML, which achieves good support for anchor.
First, there are two methods for accessing HTML anchor by ID and name:
<HTML>
<Body>
<P>
<A href = "# Method1"> method 1 </a>
</P>
<P>
<A href = "# method2"> method 2 of page anchor </a>
</P>
<H2> <a name = "Method1"> method 1 </a> </H2>
<P> use the href and name attributes of the anchor tag </P>
<H2 id = "method2"> method 2 </H2>
<P> use the anchor tag and ID attribute </P>
</Body>
</Html>
However, if you use the above two methods, you will be unable to jump to the anchor in webview.
This problem is well solved by using js to achieve the jump of the anchor point. The JS Code is as follows:
1. // convert to a number
2. Function intprase (v ){
3. V = parseint (v );
4. Return isnan (v )? 0: V;
5 .}
6.
7. // obtain Element Information
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. // obtain the scroll bar Information
33. Function getscroll (){
34. var T, L, W, h;
35. If (document.doc umentelement & document.doc umentelement. scrolltop ){
36. t = document.doc umentelement. scrolltop;
37. L = document.doc umentelement. scrollleft;
38. W = document.doc umentelement. scrollwidth;
39. H = document.doc umentelement. 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. // smooth jump between 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 .}
Usage: glide (anchorID, millisecond)
Here, anchorID is the anchor ID, and millisecond is the number of milliseconds to move to the specified anchor.
Use Js in HTML:
<A onclick = "glide (md2, 1)"> <H2> Use js to go to md2 </H2> </a>
Use name in HTML:
<A href = "# Jump-test"> <H2> Use name to go to md1 </H2> </a>
Use Id in HTML:
<A href = "# md2"> <H2> use ID to go to md2 </H2> </a>
Reference: http://shjy-nicholas.javaeye.com/blog/161247
Http://magicalboy.com/html-named-anchors.html#method2
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
