结合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,实现“返回顶部”的功能的更多相关文章

  1. 返回顶部的功能 div固定在页面位置不变

    1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...

  2. 【微信小程序】实现类似WEB端【返回顶部】功能

    1.原理:利用小程序自带的<scroll-view>组件,该组件的bindScroll和scroll-top方法.属性进行联合操作 2.效果图: 3.wxml: <scroll-vi ...

  3. 原生js实现简洁的返回顶部组件

    本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...

  4. layui topbar图标(即返回顶部)未显示的解决方法

    在自己搭建纯html模板的时候,遇到了topbar无法显示的问题,搜了社区都没啥有用的解决方法,于是引用了util.js的源文件,发现用dom变量未获取到正确的scrollTop值,经过反复测试,把这 ...

  5. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  6. 【Android】Listview返回顶部,快速返回顶部的功能实现,详解代码。

    作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...

  7. 【Android】Scrollview返回顶部,快速返回顶部的功能实现,详解代码。

    作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...

  8. 使用jQuery简单实现返回顶部的一个小案例

    1.简单写一个页面 首先我们应该创建两个盒子,container盒子主要模拟页面滚动到的位置,back盒子主要功能是实现返回顶部的功能 2.简单的对这两个盒子写一些样式 我们应该先将返回顶部盒子隐藏( ...

  9. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

随机推荐

  1. document.compatMode(判断当前浏览器采用的渲染方式)

    转载自:http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html IE对盒模型的渲染在 Standards Mode和Quirk ...

  2. cocos2d-x android黑屏后返回游戏卡顿

    转自:http://blog.csdn.net/wolfking_2009/article/details/8824931 2013年5月17日更新:对于之前说的资源释放问题,cocos2d-x 2. ...

  3. hdu1213 How Many Tables

    How Many Tables Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  4. Swift学习资源

    原文: http://leancodingnow.com/swift-learning-resources/ Swift是Apple在今年的WWDC推出的一门新的编程语言,它的1.0版本跟着Xcode ...

  5. PHP网址

    15个魔术方法的总结: http://blog.csdn.net/bossdarcy/article/details/6210794 PHP代码重构:http://blog.csdn.net/tony ...

  6. ibatis基本内容简介

    iBATIS一词来源于“internet”和“abatis”的组合,是一个由Clinton Begin在2002年发起的开放源代码项目.于2010年6月16号被 谷歌托管,改名为MyBatis.是一个 ...

  7. C++经典面试题

    1.int a=5,则 ++(a++)的值是() A.5      B.   6          C.7       D.逻辑错误 a++返回的是一个暂时变量,这里是右值,不能再前面++了 2.以下 ...

  8. cdoj 1131 男神的礼物 区间dp

    男神的礼物 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1131 Descr ...

  9. Chrome 开发者工具的Timeline和Profiles提高Web应用程序的性能

    Chrome 开发者工具的Timeline和Profiles提高Web应用程序的性能 二.减少 HTTP 的请求数    当用户浏览页面时,如果我们在用户第一次访问时将一些信息一次性加载到客户端缓存, ...

  10. 【JavaScript】JavaScript模块化编程 - CommonJS, AMD 和 RequireJS之间的关系

    通行的Javascript模块规范共有两种:CommonJS和AMD 先说说CommonJS   CommonJS - 大家是不是觉得JavaScript仅仅是一个客户端的编译语言,其实JavaScr ...