JQuery平滑滚动效果部分代码

 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; width:100%; background:#ccc; margin:10px 0;}
 7     .location {
 8         position: fixed;
 9         right: 0;
10         bottom: 10px;
11         width: 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>
posted on 2017-06-05 16:30 朱利军阅读(315) 评论(0) 收藏举报