1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>JQuery平滑滚动到顶部、底部、指定地方</title> 4 <script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script> 5 <style type="text/css"> 6 .box{ height:200px; 100%; background:#ccc; margin:10px 0;} 7 .location { 8 position: fixed; 9 right: 0; 10 bottom: 10px; 11 20px; 12 background: #FFC; 13 padding: 5px; 14 cursor: pointer; 15 color: #003; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="box"></div> 21 <div class="box"></div> 22 <div class="box"></div> 23 <div class="box"></div> 24 <div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div> 25 <div class="box"></div> 26 <div class="box"></div> 27 <div class="box"></div> 28 <div class="box"></div> 29 <div class="box bottom"></div> 30 <div class="location"> 31 <p class="scroll_top">返回顶部</p> 32 <p class="scroll_a">产品介绍</p> 33 <p class="scroll_bottom">滑到底部</p> 34 </div> 35 <script type="text/javascript"> 36 jQuery(document).ready(function($){ 37 $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 38 $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);}); 39 $('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);}); 40 }); 41 </script> 42 </body> 43 </html>