<!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. Python常见字符串处理操作

    Python中字符串处理的方法已经超过37种了,下面是一些常用的字符串处理的方法,以后慢慢添加. >>> s = 'Django is cool' #创建一个字符串 >> ...

  2. apktool.bat

    @echo off if "%PATH_BASE%" == "" set PATH_BASE=%PATH% set PATH=%CD%;%PATH_BASE%; ...

  3. Specular Mask Texture

    [Specular Mask Texture] Specular Texture是一个Mask纹理,通过Mask纹理的texel可以控制每个像素的纹理. 在属性中添加Specular Mask Tex ...

  4. Asp.net 使用Neatupload 第三方控件上传大文件，在IIS7上无法正常工作解决

    使用环境:Window Server2008 + IIS7 更改web.config配置 1.在<configSections></configSections>节内加入: & ...

  5. UNITY的UI之Pivot与Anchor区别

    Pivot Rotations, size, and scale modifications occur around the pivot so the position of the pivot a ...

  6. Bash CookBook(一)--基础

    Bash 是brian Fox在1988年1月10号出于Richard Stallman的建议而写的.   一. 运行模板: 交互登陆的shell,登陆后bash会读取和执行/etc/profile. ...

  7. SuperWebSocket

    SuperWebSocket: 概述:SuperWebSocket是WebSocket服务器的.NET实现. 简介:WebSocket是通过单个传输控制协议(TCP)插座提供双向,全双工通信信道的技术 ...

  8. Boost::lexical_cast类型转换

    1.字符串->数值 C++代码 #include <boost/lexical_cast.hpp> #include <iostream> int main() { us ...

  9. ceph修复osd为down的情况

    尝试一.直接重新激活所有osd 1.查看osd树 root@ceph01:~# ceph osd tree ID WEIGHT TYPE NAME UP/DOWN REWEIGHT PRIMARY-A ...

  10. 使用JavaScript获取CSS伪元素属性

    我们可以通过DOM元素的 style 属性获取基本的CSS样式值, 但怎么获取CSS伪元素属性呢? 如下 // 获取 .element:before 的 color 值 var color = win ...