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

<!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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值