<!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. [iOS]UIScrollView嵌套UITableView，超出屏幕的cell点击不了问题

    最初我是用UIScrollView嵌套了一个UIView,然后UIView里面嵌套UITableView,这样cell 就会超出屏幕那一部分点击不了. 解决方法如下,UITableView拖出来,作为 ...

  2. /etc/rc5.d/s991local: line25: eject:command not found错误

      使用虚拟机安装centos出现错误,原因是我使用的镜像是最小级别的,没有图形化界面,只有终端窗口 有人用vmware安装minimal centos报错/etc/rc5.d/s99local : ...

  3. MongoDB系列[2]：MongoDB导入导出以及数据库备份

    PS: 以下所有操作都是基于MongoDB自带的工具进行的,所以操作时一定要手动切换到Mongodb的bin目录下面,并且使用管理员权限运行命令 导出工具 mongoexport 概念: mongoD ...

  4. 前端开发之CSS入门篇

    一.CSS介绍和语法 二.CSS引入方式 三.基本选择器 四.高级选择器 五.伪类选择器 六.伪元素选择器 1️⃣  CSS介绍和语法 1. CSS的介绍 (1)为什么需要CSS? 使用css的目的就 ...

  5. Spark scala和java的api使用

    1.利用scala语言开发spark的worcount程序(本地运行) package com.zy.spark import org.apache.spark.rdd.RDD import org. ...

  6. 【祥哥带你玩HoloLens开发】了解如何实现远程主机为HoloLens实时渲染

    今天有一个兄弟在群里讲到他们的项目模型比较大,单用HoloLens运行设备的性能无法满足需要,问道如何将渲染工作交给服务器来做,讲渲染结果传给HoloLens.正好刚刚看官方github的时候发现一个 ...

  7. $.ajax()函数

    一般在前端html和服务器交互,又要异步提交表单时,我们通常会用到$.ajax(){}函数,这是封装到ajax里的一个函数,相比于XMLHTTPRequest做页面局部刷新更方便,但最终还是使用的XM ...

  8. XML(子节点序列化反序列对象)读写

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  9. Java中比较容易混淆的知识点

    1.  equals()  和  ==  运算符 - equals是方法, 而==是运算符(当然也可以说是广义上的方法, 或者最终都是调用方法). - equals() 是从Object类中继承来的, ...

  10. Eclipse Failed to get the required ADT version number from SDK

    之前本人的AndroidStudio和Eclipse使用的是同一个SDK,然后使用AndroidStudio的 SDK Manager对SDK进行了update,再打开Eclipse就报了“Eclip ...