码迷,mamicode.com
首页 > Web开发 > 详细

网页返回顶部之animate方法

时间:2016-11-21 18:40:55      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:显示   otto   多少   rip   ext   20px   height   poi   splay   

点击返回顶部按钮,页面滑动形式回到顶部!

HTML代码:

<div id="ctop">回到<br>顶部</div>

 

CSS代码:

#ctop{width:45px; height:45px; position: fixed; left:50%; bottom:120px; border:solid 1px #ccc; background: #fff; margin-left: 600px; text-align: center; line-height: 22px;cursor: pointer; display: none;font-size: 12px; color: #999}

 

JavaScript代码:

//点击回到顶部

  $("#ctop").click(function(){
        $("html,body").animate({scrollTop:‘0px‘},300)
  })
//判断元素在网页下滑多少像素时显示
      $(window).bind(‘scroll‘,function(){
          var len=$(this).scrollTop()
          if(len>=500){
               $(‘#ctop‘).fadeIn(500);
          }else{
               $(‘#ctop‘).fadeOut(200);
          }
      });

网页返回顶部之animate方法

标签:显示   otto   多少   rip   ext   20px   height   poi   splay   

原文地址:http://www.cnblogs.com/studycc/p/6086261.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!