scroll滚动到一定距离触发事件/返回顶部animate
<!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的更多相关文章
- scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置
scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...
- angular浏览器滚动条滚动到指定element 触发事件
angular.module('app').directive('ScrollTrigger', () => { return { restrict: "A", link:f ...
- 原生js返回顶部（匀速、由快到慢）
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...
- 渲染优化 之fixed与返回顶部 以及开启GPU Hack
fixed元素,常见网站右侧出现一个返回顶部的按钮,滚动的时候,会发现返回顶部这个区域在不停的进行重绘,而返回顶部是position:fixed定位的.这也解释了为什么fixed定位是最耗性能的属性之 ...
- JS-特效 ～ 02. 屏幕滚动事件、 DTD、scroll、顶部悬浮导航、两侧跟随广告、返回顶部小火煎
ceil 向上取整 floor 向下取整 round 四舍五入 缓动动画 动画原理 = 盒子位置 + 步长 清除定时器 步长越来越小 盒子位置 = 盒子本身位置 + (目标位置-本身位置)/n(最好为 ...
- jQuery 滚动条 滚动到底部（下拉到底部） 加载数据(触发事件、处理逻辑)、分页加载数据
1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...
- ios中iframe的scroll滚动事件替代方法
在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录. 因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图: 代码如下: <!DOCTYPE h ...
- js 滚动条滚动到底部触发事件
一.前言 在开发项目时,常常需要展示大量数据.如果全部显示出来,数据相对少时,看不出来什么不同,如果数据很多时,一次请求全部显示,这就相当可怕了. 面对这种问题,PC里使用了分页效果,将数据分成一页页 ...
- es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
随机推荐
- ubuntu系统中出现mysql数据库无法启动报错2002该怎么处理，具体报错信息如正文所示
python@ubuntu:~$ mysql -uroot -pmysqlmysql: [Warning] Using a password on the command line interface ...
- 前端开发之JavaScript HTML DOM理论篇一
主要内容: 1.DOM简介 2.DOM 节点 3.DOM 方法和属性 4.DOM 访问和修改 一.DOM简介 1.什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTM ...
- bash's parameter expansion
[bash's parameter expansion] #: find first from left, remove-left ##: find last from left, remove le ...
- linux下项目开发加载动态库：ldconfig与 /etc/ld.so.conf
场景:自己开发一个项目,程序里包含一些自定义动态库.运行,需要加载这些动态库. 假如这些库在/pro/output/lib/下面,可执行程序在/pro/output/bin/下面. 那么,我们需要: ...
- 解剖Nginx·自动脚本篇（3）源码相关变量脚本 auto/sources
在configure脚本中,运行完auto/options和auto/init脚本后,接下来就运行auto/soures脚本.这个脚本是为编译做准备的. 目录 核心模块 事件模块 OpenSSL 模块 ...
- Reveal CocoaPods的使用
Reveal是配合开发者编辑各种用户界面参数一款工具,运行界面如下,模拟器和真机都支持. Reveal使用时中不需要添加其他代码,只需要ios工程加载Reveal.framework,如果是真机需要确 ...
- Visual studio 2015/2017 opencv3.4 kineck2.0 osg realsense配置
----------------------------------------------包含目录-------------------------------------------------- ...
- 78. Subsets 求所有子集（有重复就continue）
［抄题］: Given a set of distinct integers, nums, return all possible subsets (the power set). Note: The ...
- 563. Binary Tree Tilt 子节点差的绝对值之和
［抄题］: Given a binary tree, return the tilt of the whole tree. The tilt of a tree node is defined as ...
- DEPENDS工具和DUMPBIN工具使用
在系统部署运行时我们经常发现某个程序在开发机器中可以运行,但是部署在某台PC上缺不能运行,也存在在某些机器上可运行换一台机器却不能运行.主要表现出两种现象: (1).运行.调试时出现程序 ...