<!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. 从零玩转JavaWeb系列7web服务器-----表单的提交

    在企业开放中如何提交一张表单? 例如:用户注册表 <!--表单内容--> <form action="/28-mystore/regist" id="R ...

  2. 手动为 Team Foundation Server 安装 SQL Server

    本主题中的步骤适用于安装 SQL Server 2012 企业版,你也可以使用安装标准版的相同步骤. 适用于 SQL 2014 的步骤与以上步骤也非常相似. 我们将在 TFS 所在的同一服务器上安装 ...

  3. 【FZU2178】礼物分配

    题意 在双胞胎兄弟Eric与R.W的生日会上,他们共收到了N个礼物,生日过后他们决定分配这N个礼物(numv+numw=N).对于每个礼物他们俩有着各自心中的价值vi和wi,他们要求各自分到的礼物数目 ...

  4. ubuntu 源码安装 lnmp 环境

    准备篇 下载软件包 1.下载nginx http://nginx.org/download/nginx-1.2.0.tar.gz 2.下载pcre  (支持nginx伪静态) ftp://ftp.cs ...

  5. redis 常用方法整理

    1.进入redis redis-cli -p -h 192.168.0.100 -a q9pCeAEMAWEL 2.查询keys keys activity_mobile_* 3.赋值.查值.删除 s ...

  6. controller,service,repository,component注解的使用对比

    项目中的controller层使用@controller注解 @Controller 用于标记在一个类上,使用它标记的类就是一个SpringMVC Controller 对象.分发处理器将会扫描使用了 ...

  7. 714. Best Time to Buy and Sell Stock with Transaction Fee有交易费的买卖股票

    ［抄题］: Your are given an array of integers prices, for which the i-th element is the price of a given ...

  8. SQL Server横向扩展：设计，实现与维护（2）- 分布式分区视图

    为了使得朋友们对分布式分区视图有个概念,也为了方便后面的内容展开,我们先看看下面一个图:     讲述分布式分区视图之前,很有必要将之与我们常常熟悉的分区表和索引进行区别. 首先,分布式分区视图是一个 ...

  9. CMDB小练习

    为什么要用CMDB? 因为公司之前统计资产信息用的是excel表格,随着业务的增加和信息的变更,这个表格变得越来越乱,所以我们就想着编写出一套自动管理资产信息的系统,实现自动管理资产信息 三种方案? ...

  10. Type Hierarchy

    Window - Preferences - General - Keys Name:         Open Type Hierarchy Description: Open a type hie ...