网页返回顶部之animate方法

Posted 知乎其微

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页返回顶部之animate方法相关的知识,希望对你有一定的参考价值。

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

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方法的主要内容,如果未能解决你的问题,请参考以下文章

JS或者jquery怎么设置滚动条回到顶部

网页返回顶部的几种方法

js网页返回页面顶部的小方法

js常用返回网页顶部几种方法

两种让tableview返回顶部的方法

JS怎样实现点击按钮时页面缓缓向上或下移动,类似网页底部的“返回顶部”,但是很缓慢