结合setTimeout和clearTimeout,实现“返回顶部”的功能
结合setTimeout和clearTimeout,当页面停止滚动时,“返回顶部”按钮淡隐淡出。点击“返回顶部”页面以动画形式返回顶部。完美兼容ie6-11,firefox,chrome等。
html代码如下:
<a href="javascript:void(0)" id="backToTop" class="backToTop">ToTop</a>
css代码如下:
html {_background: url(about: blank);}/* 解决在ie6下颤抖的问题 */
.backToTop {width: 80px; height: 80px; line-height: 80px; display: none; background: #d1d1d1; position: fixed; bottom: 20px; top: auto; right: 20px; z-index:; text-align: center; cursor: pointer;}
*html .backToTop {position: absolute; bottom: auto; top: expression(eval(document.documentElement.clientHeight + document.documentElement.scrollTop - this.offsetHeight - 20))}
.backToTop:hover {background: #ccc; text-decoration: none;}
js代码如下:
backToTop($('#backToTop'));
function backToTop(dom) {
var $backToTop = dom;
var start = null, backT = null;
backT = function() {
clearTimeout(start);
start = setTimeout(function() { //结合setTimeout和clearTimeout,当页面停止滚动时,返回顶部按钮淡隐淡出
if($(window).scrollTop() > 300) {
$backToTop.fadeIn(400);
} else {
$backToTop.fadeOut(400);
}
}, 400);
}
backT();
$(window).scroll(function() {
backT();
});
$(window).resize(function() {
backT();
});
$backToTop.on("click", function() {
$("html, body").animate({
scrollTop: "0px"
}, 200);
$backToTop.fadeOut(400);
return false;
});
}
结合setTimeout和clearTimeout,实现“返回顶部”的功能的更多相关文章
- 返回顶部的功能 div固定在页面位置不变
1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...
- 【微信小程序】实现类似WEB端【返回顶部】功能
1.原理:利用小程序自带的<scroll-view>组件,该组件的bindScroll和scroll-top方法.属性进行联合操作 2.效果图: 3.wxml: <scroll-vi ...
- 原生js实现简洁的返回顶部组件
本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...
- layui topbar图标(即返回顶部)未显示的解决方法
在自己搭建纯html模板的时候,遇到了topbar无法显示的问题,搜了社区都没啥有用的解决方法,于是引用了util.js的源文件,发现用dom变量未获取到正确的scrollTop值,经过反复测试,把这 ...
- 前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...
- 【Android】Listview返回顶部,快速返回顶部的功能实现,详解代码。
作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...
- 【Android】Scrollview返回顶部,快速返回顶部的功能实现,详解代码。
作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...
- 使用jQuery简单实现返回顶部的一个小案例
1.简单写一个页面 首先我们应该创建两个盒子,container盒子主要模拟页面滚动到的位置,back盒子主要功能是实现返回顶部的功能 2.简单的对这两个盒子写一些样式 我们应该先将返回顶部盒子隐藏( ...
- jquery 返回顶部 兼容web移动
返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...
随机推荐
- EasyMock问题总结
1. java.lang.IllegalStateException: missing behavior definition for the preceding method call getBid ...
- 从零开始学C++之虚函数与多态(一):虚函数表指针、虚析构函数、object slicing与虚函数
一.多态 多态性是面向对象程序设计的重要特征之一. 多态性是指发出同样的消息被不同类型的对象接收时有可能导致完全不同的行为. 多态的实现: 函数重载 运算符重载 模板 虚函数 (1).静态绑定与动态绑 ...
- cocos2dx 手势识别
转自:http://blog.csdn.net/qq634416025/article/details/8685187 g_rGemertricRecognizer = new GeometricRe ...
- tomcat配置文件server.xml具体解释
元素名 属性 解释 server port 指定一个port,这个port负责监听关闭tomcat 的请求 shutdown 指定向port发送的命令字符串 service name 指定servic ...
- Codeforces Round #290 (Div. 2) B. Fox And Two Dots dfs
B. Fox And Two Dots 题目连接: http://codeforces.com/contest/510/problem/B Description Fox Ciel is playin ...
- Codeforces Round #309 (Div. 2) A. Kyoya and Photobooks 字符串水题
A. Kyoya and Photobooks Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/5 ...
- C#生成软件注册码
开发软件时,当用到商业用途时,注册码与激活码就显得很重要了.现在的软件破解技术实在在强了,各种国内外大型软件都有注册机制,但同时也不断地被破解.下面发的只是一个常用版本,发出源码被破就更容易了,但我们 ...
- js实现按回车自行提交
<script type="text/javascript"> document.onkeydown = function (e) { var theEvent = w ...
- Maven实战之Quick Start
Introduction Maven是一个异常强大的构建工具,能够帮我们自动化构建过程,从清理.编译.测试到生成报告,再到打包和部署.通过Maven,我们只需要输入简单的命令(如mvn clean i ...
- Java SSH远程执行Shell脚本实现(转)
前言 此程序需要ganymed-ssh2-build210.jar包(下载地址:http://www.ganymed.ethz.ch/ssh2/) 为了调试方便,可以将\ganymed-ssh2-bu ...