结合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 ...
随机推荐
- 学习JQuery中文文档之get()函数
前端大神群的群主告诉我们:学习一个框架最好的方法是去把官方文档研究一遍. 现在正式开始我的前端之路,从JQuery的中文文档开始. 基础不牢固,看起来有点慢,但是我会一直坚持下去的.把遇到的问题都记录 ...
- RFID FDX HDX Technology
Got a tough RF environment? Turn to TI’s proven LF technology TI’s low-frequency (LF) technology has ...
- C# 仿制QQ弹出新闻消息框
打开QQ的时候,QQ新闻弹出窗体在屏幕的右下角就会慢慢升起一个小窗口,占用的地方不大,可以起到提示的作用.下面就让我们来看看,怎样用系统API来轻松实现这个功能. API原型函数: bool Anim ...
- crm2011创建货币Money类型的字段
using System; using Microsoft.Xrm.Sdk; using Microsoft.Xrm.Sdk.Messages; using Microsoft ...
- 从ext2文件系统上读出超级块
概述 本篇博客中,我们将仔细分析如何从格式化为ext2文件系统的磁盘中读取超级块并填充内存超级块结构,每次将一个格式化了ext2文件系统的磁盘(分区)挂载到挂载点的时候会调用该方 ...
- P、NP、NP-Complete、NP-hard问题
Table of Contents 1 遇到难题怎么办? 2 什么是P.NP.NP-Complete和NP-hard 3 P = NP ???? 4 参考 1 遇到难题怎么办? 遇到一个问题,通常我们 ...
- ubuntu14 部署zookeeper3.4.6启动失败
解压缩zookeeper,启动时,报如下错误: zkServer.sh: 81: /home/xxx/zookeeper-3.4.6/bin/zkEnv.sh: Syntax error: " ...
- 数据挖掘算法-Apriori Algorithm(关联规则)
http://www.cnblogs.com/jingwhale/p/4618351.html Apriori algorithm是关联规则里一项基本算法.是由Rakesh Agrawal和Ramak ...
- 一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
- 转:《JavaScript—之对象参数的引用传递》
转自:博客园 Wayou http://www.cnblogs.com/Wayou/p/javascript_arguments_passing_with_reference.html 变量 1.Ja ...