1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <style type="text/css">
  8.     	*{margin: 0; padding: 0;}
  9.     	.box{ width: 960px; height: 1800px; background: #F29292; margin: 0 auto; }
  10.     	.gotop{ width: 60px; height: 60px; background: red; position: fixed; left: 50%; bottom: 50px; margin-left: 480px; display: none; }
  11.     </style>
  12.     <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  13.     <script type="text/javascript">
  14.     $(function() {
  15.         //scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
  16.         $(window).scroll(function() {
  17.                 var scroHei = $(window).scrollTop();//滚动的高度
  18.                 if (scroHei > 400) {
  19.                     $('.J_goTop').fadeIn();
  20.                 } else {
  21.                     $('.J_goTop').fadeOut();
  22.                 }
  23.             })
  24.             /*点击返回顶部*/
  25.         $('.J_goTop').click(function() {
  26.             $('body,html').animate({
  27.                 scrollTop: 0
  28.             }, 600);
  29.         })
  30.     })
  31.     </script>
  32. </head>
  33.  
  34. <body>
  35. <div class="box"></div>
  36. <div class="gotop J_goTop">返回顶部</div>
  37. </body>
  38.  
  39. </html>

　　如图：

scroll滚动到一定距离触发事件/返回顶部animate的更多相关文章

  1. scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置

    scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...

  2. angular浏览器滚动条滚动到指定element 触发事件

    angular.module('app').directive('ScrollTrigger', () => { return { restrict: "A", link:f ...

  3. 原生js返回顶部（匀速、由快到慢）

    在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...

  4. 渲染优化 之fixed与返回顶部 以及开启GPU Hack

    fixed元素,常见网站右侧出现一个返回顶部的按钮,滚动的时候,会发现返回顶部这个区域在不停的进行重绘,而返回顶部是position:fixed定位的.这也解释了为什么fixed定位是最耗性能的属性之 ...

  5. JS-特效 ～ 02. 屏幕滚动事件、 DTD、scroll、顶部悬浮导航、两侧跟随广告、返回顶部小火煎

    ceil 向上取整 floor 向下取整 round 四舍五入 缓动动画 动画原理 = 盒子位置 + 步长 清除定时器 步长越来越小 盒子位置 = 盒子本身位置 + (目标位置-本身位置)/n(最好为 ...

  6. jQuery 滚动条 滚动到底部（下拉到底部） 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  7. ios中iframe的scroll滚动事件替代方法

    在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录. 因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图: 代码如下: <!DOCTYPE h ...

  8. js 滚动条滚动到底部触发事件

    一.前言 在开发项目时,常常需要展示大量数据.如果全部显示出来,数据相对少时,看不出来什么不同,如果数据很多时,一次请求全部显示,这就相当可怕了. 面对这种问题,PC里使用了分页效果,将数据分成一页页 ...

  9. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

随机推荐

  1. HashMap、HashTable的区别

    HashMap和HashTable都实现了Map接口,但是要用哪个要分清它们之间的区别. 它们的主要区别:线程安全性.速度 HashMap几乎可以等价于HashTable除了HashMap是非sync ...

  2. solr配置相关：约束文件及引入ik分词器

    schema.xml: solr约束文件 Solr中会提前对文档中的字段进行定义,并且在schema.xml中对这些字段的属性进行约束,例如:字段数据类型.字段是否索引.是否存储.是否分词等等 < ...

  3. emulator: Trying to vcpu execute at eip:6d4053

  4. 【LA11248 训练指南】网络扩容【最大流】

    题意: 给定一个有向网络,每条边均有一个容量.问是否存在一个从点1到点N,流量为C的流.如果不存在,是否可以恰好修改一条弧的容量,使得存在这样的流? 分析: 先跑一遍最大流,如果最大流大于等于C,则输 ...

  5. 14-python登入教务网(python+bs4)

    用request先得到到session对象,用其去放送请求,会自动保存cookie. 模拟有验证码的登入步骤: 1.发送请求登入页面: 2.分析验证码的地址,以及要将登入请求发往的地址(可以先输入错的 ...

  6. 10-stack

    c++ stl栈stack介绍 C++ Stack(堆栈) 是一个容器类的改编,为程序员提供了堆栈的全部功能,——也就是说实现了一个先进后出(FILO)的数据结构. c++ stl栈stack的头文件 ...

  7. Madgwick算法详细解读

    Madgwick算法详细解读 极品巧克力 前言 接上一篇文章<Google Cardboard的九轴融合算法>. Madgwick算法是另外一种九轴融合的方法,广泛应用在旋翼飞行器上,效果 ...

  8. smarty 使用php函数

    strtotime() time() <{if strtotime($activity.start_time) gt time()}> <a href="?action=d ...

  9. Anaconda 安装和配置

    Anaconda 安装和配置 1. Anaconda 安装 Anaconda说明及安装过程:Anaconda详细安装使用教程 2. Anaconda和Pip源修改 Anaconda源修改:打开Anac ...

  10. 原型设计工具Mockplus新年送福利，见者有份

    为感谢大家对Mockplus的喜爱与支持,给大家送福利了! 送送送,见者有份! 参与活动,三分钟时间,均可最高获赠专业版1个月使用时间.见者有份! 领福利步骤: 1. 扫码关注微信公众号:Mockpl ...