js平滑滚动到顶部,底部,指定地方
Posted 听雨的人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js平滑滚动到顶部,底部,指定地方相关的知识，希望对你有一定的参考价值。
采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用jquery中的animate，实现滚动的一个动作，慢慢的滚动到你想跳转到的位置，从而看起来会非常高大上。
示例演示地址：http://www.daixiaorui.com/Public/demo/js/scroll.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>js平滑滚动到顶部、底部、指定地方</title> 6 <script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script> 7 <style> 8 .box{ height:200px; width:100%; background:#ccc; margin:10px 0;} 9 .location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003}; 10 </style> 11 </head> 12 13 <body> 14 <div class="box"></div> 15 <div class="box"></div> 16 <div class="box"></div> 17 <div class="box"></div> 18 <div class="box a">产品介绍产品介绍 http://www.daixiaorui.com 产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div> 19 <div class="box"></div> 20 <div class="box"></div> 21 <div class="box"></div> 22 <div class="box"></div> 23 <div class="box bottom"></div> 24 25 <div class="location"> 26 <p class="scroll_top">返回顶部</p> 27 <p class="scroll_a">产品介绍</p> 28 <p class="scroll_bottom">滑到底部</p> 29 </div> 30 <script type="text/javascript"> 31 jQuery(document).ready(function($){ 32 $(‘.scroll_top‘).click(function(){$(‘html,body‘).animate({scrollTop: ‘0px‘}, 800);}); 33 $(‘.scroll_a‘).click(function(){$(‘html,body‘).animate({scrollTop:$(‘.a‘).offset().top}, 800);}); 34 $(‘.scroll_bottom‘).click(function(){$(‘html,body‘).animate({scrollTop:$(‘.bottom‘).offset().top}, 800);}); 35 }); 36 </script> 37 </body> 38 </html>
以上是关于js平滑滚动到顶部,底部,指定地方的主要内容，如果未能解决你的问题，请参考以下文章