结合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: 1200; 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;
    });
}
时间: 2024-08-29 05:50:28

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

jQuery实现返回顶部按钮功能

html结构 <div class="toolbar"> <a href="javascript:;" class="toolbar-item"> <span class="toolbar-btn" id="backtop"> <i class="toolbar-icon icon-upload2"></i> //图标字体 &l

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

1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用呢?反正我用了感觉没啥用. 2.还有一种就是JS控制了.我写的是随着滚动滚动 ,计算div的绝对与可视页面的位置不变. $(window.parent).on('scroll',function(){ $(返回顶部所在div选择器).css('top',parent.document.documen

返回顶部按钮功能的实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>toTop</title> <style type="text/css"> *{ margin:0; padding: 0; } html{ height: 100%; } .toTopBtn{ position: fixed

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

本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~ 返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置.实现思路也很容易,只要改变document.documentElement.scrollTop或document.body.scrollTop的值即可.本文抛弃所有加速减速的酷炫效果,回归软件的本质,提供一个最简洁的实现,只追求实用性,不追求所谓的用户体验,效果

网页返回顶部的几种方法

1,在页面顶部固定一个  返回网页顶部的 按钮 .back-to-top { position: fixed; right: 20px; bottom: 10px; width: 100px; height: 30px; text-align: center; line-height: 30px; color: #2C2C2C; text-decoration: none; border: 1px solid #CCCCCC; } <a class="back-to-top" h

页面返回顶部功能的实现

这是一个小小的功能,jQuery实现的话很简单,即animate()方法,特地记录一下. 首先贴一下返回顶部的功能代码: 方法一: 1 $(function(){ 2 $("#toTop").click(function(){ 3 $("html").animate({"scrollTop": "0px"},100); //IE,FF 4 $("body").animate({"scrollTop

jQuery返回顶部的两种方法(包括go-top.js)

jQuery实现网页"返回顶部"的功能,相信见到这种效果已经不稀奇了吧;那究竟如何实现呢?方法还是挺多了,先介绍两种简单的: 第一种,只使用jquery插件来实现,下面是一个完整的代码例子,有兴趣的自己摸索吧:前端UI分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

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

描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button onclick="returnTop()" id="btnTop" title="返回顶部">返回顶部</button> 3 </div> CSS: 1 /* return top */ 2 #btnTop { 3 display: none; 4 position: f

我要返回顶部

我觉得一个网站最不可少的小功能就是返回顶部了吧,尤其是那些长的要命,拉都拉不到尽头的,简直丧心病狂,如果没有返回顶部的按钮的话,鬼愿意原路拉回去,直接关掉走人.所以一个返回顶部的按钮还是需要的,当然,返回顶部也可以做出很多花样,本文只讨论如何返回,不管具体的外观样式,那都是后话. 以下是一些方法: 1. <a href='#'>返回顶部</a> ok,搞定,是不是觉得很坑爹,但我刚开始接触的时候就是用这个方法的,简单暴力直接,就是硬生生的直接跳回去,不好看,没有美感,而且直接这样不