js返回顶部实例分享


Posted in Javascript onDecember 21, 2016

话不多说,请看实例

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----文件操作
Jan 18 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
JS实现的系统调色板完整实例
Dec 21 #Javascript
基于jPlayer三分屏的制作方法
Dec 21 #Javascript
js实现的简练高效拖拽功能示例
Dec 21 #Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 #Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 #Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 #Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 #Javascript
You might like
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
python 安装移动复制第三方库操作
2020/07/13 Python
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
小学教师的自我评价范例
2013/10/31 职场文书
暑期实习鉴定
2013/12/16 职场文书
技能比武方案
2014/05/21 职场文书
2014年派出所工作总结
2014/11/21 职场文书
人事文员岗位职责
2015/02/04 职场文书
红旗渠导游词
2015/02/09 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技