结合setTimeout和clearTimeout,实现“返回顶部”的功能

时间:2022-06-25 12:32:35

结合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&plus;js实现返回顶部功能

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

  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. js- this

    this对象是基于函数在执行的环境绑定的. (一)   this 在闭包环境中指向的对象. <Js高级程序设计>中提到: 每个函数在被调用时,其活动对象都会自动取得两个特殊变量:this和 ...

  2. Xcode Alcatraz插件管理介绍和使用

    Xcode Alcatraz插件管理介绍和使用http://www.jianshu.com/p/7a2484123bf6 1.简介 Alcatraz是一个能帮你管理Xcode插件丶模版及颜色配置的工具 ...

  3. scala命令

    1. intersect方法找出两个字符串的相同字符: scala> "Hello".intersect("World") res3: String = ...

  4. &lpar;转&rpar; c&plus;&plus; 迭代器

    原地址:http://www.cnblogs.com/marchtea/archive/2012/02/27/2370068.html 前言: 以下的内容为我阅读c++沉思录18,19,20章的笔记以 ...

  5. Swift3&period;0服务端开发&lpar;二&rpar; 静态文件添加、路由配置以及表单提交

    今天博客中就来聊一下Perfect框架的静态文件的添加与访问,路由的配置以及表单的提交.虽然官网上有聊静态文件的访问的部分,但是在使用Perfect框架来访问静态文件时还是有些点需要注意的,这些关键点 ...

  6. Linux内存管理之slab分配器

    slab分配器是什么? 参考:http://blog.csdn.net/vanbreaker/article/details/7664296 slab分配器是Linux内存管理中非常重要和复杂的一部分 ...

  7. (一〇四)使用Xcode6创建framework动态静态库

    在Xcode6以前,创建framework可以使用iOS-Universal-Framework模板来创建framework,现在苹果已经提供了模板,如下图选择: 使用此模版创建的默认是动态库,方法和 ...

  8. centos6&period;8安装httpd后无法访问

    1.打开 httpd.conf 将里面的 #ServerName localhost:80 注释去掉 2.修改SELinux状态: 1)/usr/sbin/sestatus -v      ##如果S ...

  9. 【2019北京集训测试赛(十三)】数据&lpar;sj&rpar; 冷静分析

    题目大意:给你一个代表区间$[1,n]$的线段树,问你随机访问区间$[1,n]$中的一个子区间,覆盖到的线段树节点个数的期望(需要乘上$\frac{n(n-1)}{2}$后输出). 数据范围:$n≤1 ...

  10. JSON学习笔记-5

    JSON.parse() 1.从服务器接受数据进行解析(一般是字符串) 2.解析前要确保你的数据是标准的 JSON 格式,否则会解析出错.可以使用线工具检测:https://c.runoob.com/ ...