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 相关文章推荐
比Jquery的document.ready更快的方法
Apr 28 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 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
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
Python request中文乱码问题解决方案
2020/09/17 Python
浅析python实现动态规划背包问题
2020/12/31 Python
2014升学宴答谢词
2014/01/26 职场文书
五好关工委申报材料
2014/05/31 职场文书
科技节口号
2014/06/19 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
高中生军训感言
2015/08/01 职场文书
python字符串常规操作大全
2021/05/02 Python