js返回顶部实例分享

更新时间：2016年12月21日 11:06:26 作者：以茜为贵

本文主要分享了js返回顶部的实例代码。可复制直接运行，方便快捷。有很好的参考价值，需要的朋友一起来看下吧

话不多说，请看实例

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>

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

您可能感兴趣的文章:

JavaScript检查数字是否为整数或浮点数的方法
这篇文章主要介绍了JavaScript检查数字是否为整数或浮点数的方法,涉及javascript类型判断的相关技巧,需要的朋友可以参考下
2015-06-06
Js实现中国公民身份证号码有效性验证实例代码
这篇文章主要介绍了Js实现中国公民身份证号码有效性验证实例代码，可以识别身份证号码的正确性，有兴趣的可以了解一下
2017-05-05
ie和firefox不兼容的解决方法集合
网页设计很多情况下，需要注意ie跟firefox的不同区别，脚本之家提供了不好这样的文章，大家可以好好看下。
2009-04-04
详解JSON Web Token 入门教程
这篇文章主要介绍了详解JSON Web Token 入门教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
JavaScript删除有序数组中的重复项
这篇文章主要介绍了JavaScript删除有序数组中的重复项，主要解决有序数组 nums ，要求原地删除重复出现的元素，使每个元素只出现一次，返回删除后数组的新长的问题，下面实现操作，需要的小伙伴可以参考一下
2022-03-03
uniapp实现全局变量的几种方式总结
这里说全局变量,着重指的是能够全局动态响应的情况,下面这篇文章主要给大家介绍了关于uniapp实现全局变量的几种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-10-10
javascript刷新父页面方法汇总详解
这篇文章主要介绍了javascript刷新父页面方法汇总详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-10-10
javascript中巧用“闭包”实现程序的暂停执行功能
javascript中巧用“闭包”实现程序的暂停执行功能...
2007-04-04
JavaScript统计字符出现次数
这篇文章主要为大家详细介绍了JavaScript字符统计出现次数，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
ES6新特性之模块Module用法详解
这篇文章主要介绍了ES6新特性之模块Module用法,简要说明了模块Module的概念、功能并结合实例形式分析了模块Module的使用方法与相关注意事项,需要的朋友可以参考下
2017-04-04

js返回顶部实例分享

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具