<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    	*{margin: 0; padding: 0;}

    	.box{ width: 960px; height: 1800px; background: #F29292; margin: 0 auto; }

    	.gotop{ width: 60px; height: 60px; background: red; position: fixed; left: 50%; bottom: 50px; margin-left: 480px; display: none; }

    </style>

    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    $(function() {

        //scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

        $(window).scroll(function() {

                var scroHei = $(window).scrollTop();//滚动的高度

                if (scroHei > 400) {

                    $('.J_goTop').fadeIn();

                } else {

                    $('.J_goTop').fadeOut();

                }

            })

            /*点击返回顶部*/

        $('.J_goTop').click(function() {

            $('body,html').animate({

                scrollTop: 0

            }, 600);

        })

    })

    </script>

</head>

<body>

<div class="box"></div>

<div class="gotop J_goTop">返回顶部</div>

</body>

</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. springMVC环境搭建(1)

    工作一年以来,写的都是.net,最近比较闲,想把之前学过的java相关的东西捡起来,也学点新的东西.以前做过SSH架构,一直好奇spring mvc是怎么样的,所以今天试试看. 总体的代码结构 手动输 ...

  2. Opencv 亚像素级别角点检测

    Size winSize = Size(5,5); Size zerozone = Size(-1,-1); TermCriteria tc = TermCriteria(TermCriteria:: ...

  3. iOS 打印结构体

    关于OC直接打印结构体,点(CGRect,CGSize,CGPoint,UIOffset)等数据类型,我们完全可以把其转换为OC对象来进项打印调试,而不必对结构体中的成员变量进行打印.就好比我们可以使 ...

  4. Linux系统中当前路径不加入PATH的原因

    主要是出于安全的考虑,由于系统默认是允许所有人在/tmp下写入任何文件的,万一有居心不良的用户或者黑客入侵到计算机,并在/tmp下面埋下木马,名字为ls,当用户用root身份登录后,到/tmp目录执行 ...

  5. VIO系统的IMU与相机时间偏差标定

      视觉里程计(VIO)作为一种空间定位方法,广泛应用于VR/AR.无人驾驶和移动机器人,比如近年火热的苹果 AR-Kit和谷歌AR-Core都使用了VIO技术进行空间定位.通常,VIO系统忽略IMU ...

  6. ubuntu14.04 64位安装 g2o

    参考链接:http://blog.csdn.net/jiujiu932/article/details/52248577 http://www.cnblogs.com/gaoxiang12/p/473 ...

  7. SqlSugar Asp.Net 高性能ORM框架

    SqlSugar从去年到现在已经一年了,版本从1.0升到了现在的2.4.1 ,这是一个稳定版本 ,有数家公司已经项目上线,在这里我将SqlSugar的功能重新整理成一篇新的贴子,希望大家喜欢. 公司团 ...

  8. Nginx概述、安装及配置详解

    nginx概述 nginx是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器:同时也是一个IMAP.POP3.SMTP代理服务器:nginx可以作为一个HTTP服务器进行网站的发布处理,另外 ...

  9. ECC 算法

    一.简介 1)椭圆曲线密码学的初级读本 http://8btc.com/thread-1240-1-1.html 2)ECC加密算法入门介绍 http://www.pediy.com/kssd/ped ...

  10. BZOJ 2243 染色 (线段树+树链剖分)

    2243: [SDOI2011]染色 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 9895  Solved: 3735[Submit][Status ...