最简单的用jquery实现动画的跳到顶部和底部

最新推荐文章于 2023-06-13 10:37:33 发布

kkrgwbj

最新推荐文章于 2023-06-13 10:37:33 发布

阅读量518

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/kkrgwbj/article/details/38846959

版权

jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

 
 <!DOCTYPE html PUBLIC  
 "-//W3C//DTD XHTML 1.0 Transitional//EN"  
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 > 
 
 <html xmlns= 
 "http://www.w3.org/1999/xhtml"  
 > 
 
 <head> 
 
 <title>Untitled Page</title> 
 
 <script type= 
 "text/javascript"  
 src=jquery-1.8.0.js></script> 
 
 <script> 
 
 $(document).ready( 
 function  
 () { 
 
 //当点击顶部按钮的时候，执行方法,scrollTop属性获取选中标签距滚动条的距离。 
 
 $( 
 '#top' 
 ).click( 
 function  
 () { 
 
 $( 
 'html' 
 ).animate( 
 
 { scrollTop:  
 '0px'  
 }, 1000 
 
 ); 
 
 }); 
 
 //当点击底部标签时候，执行方法，其中offset()获取匹配元素在当前视口的相对偏移,返回的是一个对象，有两个属性top,left 
 
 //animate,的第二个属性当然我们也可以设置'slow','normal'或'fast' 
 
 $( 
 '#foot' 
 ).click( 
 function  
 () { 
 
 $( 
 'html' 
 ).animate( 
 
 {scrollTop:$( 
 'span' 
 ).offset().top},1000 
 
 ); 
 
 }); 
 
 }); 
 
 </script> 
 
 </head> 
 
 <body> 
 
 <br /> <br /> <br /> <br /> <br /> 
 
 <a href= 
 "#"  
 id= 
 "foot" 
 >底部</a> 
 
 <br /> <br /> <br /> <br /> <br /> 
 
 <br /> <br /> <br /> <br /> <br /> 

 <a href= 
 "#"  
 id= 
 "top" 
 >顶部</a> 
 
 <br /> <br /> <br /> <br /> <br /> 
 
 <span></span> 
 
 </body> 
 
 </html>