结合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 ...
随机推荐
-
js- this
this对象是基于函数在执行的环境绑定的. (一) this 在闭包环境中指向的对象. <Js高级程序设计>中提到: 每个函数在被调用时,其活动对象都会自动取得两个特殊变量:this和 ...
-
Xcode Alcatraz插件管理介绍和使用
Xcode Alcatraz插件管理介绍和使用http://www.jianshu.com/p/7a2484123bf6 1.简介 Alcatraz是一个能帮你管理Xcode插件丶模版及颜色配置的工具 ...
-
scala命令
1. intersect方法找出两个字符串的相同字符: scala> "Hello".intersect("World") res3: String = ...
-
(转) c++ 迭代器
原地址:http://www.cnblogs.com/marchtea/archive/2012/02/27/2370068.html 前言: 以下的内容为我阅读c++沉思录18,19,20章的笔记以 ...
-
Swift3.0服务端开发(二) 静态文件添加、路由配置以及表单提交
今天博客中就来聊一下Perfect框架的静态文件的添加与访问,路由的配置以及表单的提交.虽然官网上有聊静态文件的访问的部分,但是在使用Perfect框架来访问静态文件时还是有些点需要注意的,这些关键点 ...
-
Linux内存管理之slab分配器
slab分配器是什么? 参考:http://blog.csdn.net/vanbreaker/article/details/7664296 slab分配器是Linux内存管理中非常重要和复杂的一部分 ...
-
(一〇四)使用Xcode6创建framework动态静态库
在Xcode6以前,创建framework可以使用iOS-Universal-Framework模板来创建framework,现在苹果已经提供了模板,如下图选择: 使用此模版创建的默认是动态库,方法和 ...
-
centos6.8安装httpd后无法访问
1.打开 httpd.conf 将里面的 #ServerName localhost:80 注释去掉 2.修改SELinux状态: 1)/usr/sbin/sestatus -v ##如果S ...
-
【2019北京集训测试赛(十三)】数据(sj) 冷静分析
题目大意:给你一个代表区间$[1,n]$的线段树,问你随机访问区间$[1,n]$中的一个子区间,覆盖到的线段树节点个数的期望(需要乘上$\frac{n(n-1)}{2}$后输出). 数据范围:$n≤1 ...
-
JSON学习笔记-5
JSON.parse() 1.从服务器接受数据进行解析(一般是字符串) 2.解析前要确保你的数据是标准的 JSON 格式,否则会解析出错.可以使用线工具检测:https://c.runoob.com/ ...