<!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. CocoaPods安装/更新报错While executing gem ... (OpenSSL::SSL::SSLError)解决方案

    今天给新买的MacBook Pro更新CocoaPods,结果上来就报错,出师不利. HeinocdeMacBook-Pro:~ Heinoc$ sudo gem update --system Pa ...

  2. Go语言的基本类型转换-golang类型转换

    简单整理一下Golang的基本类型转换,作为备忘: 1.整形到字符串: var i int = 1 var s string 3.  s = strconv.Itoa(i) 或者 s = Format ...

  3. 关于Redis的常识

    原文出自:http://blog.jobbole.com/44476/ 版本:V3.0.2 2013-7-13 (江南白衣版权所有,转载请保留出处) 1. Overview 1.1 资料 <Th ...

  4. 优化mysql slave的同步速度

    测试环境:Red Hat Enterprise Linux Server release 6.3 (Santiago)Server version: 5.6.22-log MySQL Communit ...

  5. ServiceStack.redis用法

    using System; using System.Collections.Generic; using ServiceStack.Redis; namespace SysBuild { class ...

  6. 从零开始安装hue（原创-转载注明出处）

    hue安装需要从github上面下载源码,进行编译安装.github上面给出的安装教程很简单 然而实际上在安装的过程中遇到了无数个坑,下面开始真正意义上的从零开始安装hue. 安装环境: centOS ...

  7. 遍历properties文件

    Properties pro = new Properties();try {    InputStream inStr = ClassLoader.getSystemResourceAsStream ...

  8. 我的ubuntu14.04配置

    完全卸载java(移除所有 Java相关包 (Sun, Oracle, OpenJDK, IcedTea plugins, GIJ)) 转载修改, 原文见:http://blog.csdn.net/s ...

  9. [operator]ELK6的安装

    找了很久才找到一个博客写得比较全面的,FrankDeng 系统环境:CentOS7 相关软件:node-v10.9.0.tar.gz.kibana-6.4.0-linux-x86_64.tar.gz. ...

  10. 《深入理解Elasticsearch》README

    书目 <深入理解ElasticSearch>拉斐尔·酷奇,马雷克·罗戈任斯基[著]张世武,余洪森,商旦[译] 机械工业出版社,2016.1 本系列包括以下8篇笔记 第01章 Elastic ...