jQuery控制滚动条滚动到指定位置
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
