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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
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
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
全面解读Python Web开发框架Django
2014/06/30 Python
python实现感知器
2017/12/19 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
python搜索包的路径的实现方法
2019/07/19 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
关于python3中setup.py小概念解析
2019/08/22 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
党日活动总结
2014/05/07 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
英语读书笔记
2015/07/02 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
MySQL表字段时间设置默认值
2021/05/13 MySQL