jQuery控制滚动条滚动到指定位置

时间:2021-07-23 10:37:34
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .redMark{
 8             color: red;
 9             font-weight: bold;
10         }
11         .blueMark{
12             color: blue;
13             font-weight: bold;
14         }
15     </style>
16     <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
17     <script>
18             function scrollToError() {
19                 var body = $('html,body');
20                 var scroll_1 = $('.try').first();
21                 var scroll_2 = $('#test');
22                 if(scrollTo.length) {
23                     body.animate({scrollTop:scroll_1.offset().top - 100 }, 2000);
24                     body.animate({scrollTop:scroll_2.offset().top - 100 }, 2000);
25                 }
26             }
27     </script>
28 </head>
29 <body>
30     <p>Hello World!</p>
31     <p>Hello World!</p>
32     <p>Hello World!</p>
33     <p>Hello World!</p>
34     <p>Hello World!</p>
35     <p>Hello World!</p>
36     <p>Hello World!</p>
37     <p>Hello World!</p>
38     <p>Hello World!</p>
39     <p>Hello World!</p>
40     <p>Hello World!</p>
41     <p>Hello World!</p>
42     <p class='try redMark'>Hello World!</p>
43     <p>Hello World!</p>
44     <p>Hello World!</p>
45     <p>Hello World!</p>
46     <p>Hello World!</p>
47     <p>Hello World!</p>
48     <p>Hello World!</p>
49     <p>Hello World!</p>
50     <p>Hello World!</p>
51     <p>Hello World!</p>
52     <p>Hello World!</p>
53     <p>Hello World!</p>
54     <p>Hello World!</p>
55     <p id='test' class='blueMark'>Hello World!</p>
56     <p>Hello World!</p>
57     <p>Hello World!</p>
58     <p>Hello World!</p>
59     <p>Hello World!</p>
60     <p>Hello World!</p>
61     <p>Hello World!</p>
62     <p>Hello World!</p>
63     <p>Hello World!</p>
64     <p>Hello World!</p>
65     <p>Hello World!</p>
66     <p>Hello World!</p>
67     <p>Hello World!</p>
68     <p class='try redMark'>Hello World!</p>
69     <p>Hello World!</p>
70     <p>Hello World!</p>
71     <p>Hello World!</p>
72     <p>Hello World!</p>
73     <p>Hello World!</p>
74     <p>Hello World!</p>
75     <p>Hello World!</p>
76     <p>Hello World!</p>
77     <p>Hello World!</p>
78     <input type="submit" onclick="scrollToError()" value="Scroll Action"/>
79 </body>
80 </html>

更多参考:http://www.cnblogs.com/yichengbo/archive/2011/10/24/2222638.html