1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>jq实现去底部去顶部功能</title> 6 </head> 7 <style> 8 li { 9 height: 100px; 10 } 11 </style> 12 <body> 13 <ul id="box"> 14 <li><a id="tobottom">去底部</a></li> 15 <li>1</li> 16 <li>2</li> 17 <li>3</li> 18 <li>4</li> 19 <li>5</li> 20 <li>6</li> 21 <li><a id="totop">去顶部</a></li> 22 </ul> 23 </body> 24 <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> 25 <script type="text/javascript" charset="utf-8"> 26 /* 去底部 */ 27 $('#tobottom').on('click', function() { 28 /* $('html,body,#box').scrollTop(9999); */ 29 $('html,body,#box').animate({ 30 scrollTop: 9999 31 }, 'slow'); 32 }); 33 34 /* 去顶部 */ 35 $('#totop').on('click', function() { 36 $('html,body,#box').animate({ 37 scrollTop: 0 38 }, 'slow'); //缓慢动画 39 }); 40 </script> 41 </html>
jq实现去底部去顶部功能
猜你喜欢
转载自www.cnblogs.com/antao/p/12515823.html
今日推荐
周排行