js返回顶部实例分享_javascript技巧

话不多说，请看实例

1、HTML结构

<div class="return_top"></div>

2、css样式

.return_top{
  width: 50px;
  height: 50px;
  background: url(../images/lanren.gif) no-repeat center #FF8D16;
  position:fixed;
  right: 30px;
  bottom: 30px;
  display: none;
  cursor: pointer;
  z-index: 99;
}

3、js效果

<script>
   $(function(){
    $(window).scroll(function(){
      var topDistance=$(window).scrollTop();  //获取鼠标在本窗口现有状态下移动的高度
      if(topDistance>100){  //如果移动高度大于100px,顶部图标单单显示出，如果移动高度小于等于100，顶部图标不显示
        $('.return_top').fadeIn(800);
      }else{
        $('.return_top').fadeOut(800);
      }
    });
    $('.return_top').on('click',function(){
      $('html,body').animate({scrollTop:0},800); //必须用$('html,body')选择，不然没效果
    })
  });
</script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索js
返回顶部
javascript 返回顶部、javascript回到顶部、javascript滚动到顶部、javascript经典实例、javascript项目实例，以便于您获取更多的相关知识。