返回顶部2种写法

最新推荐文章于 2023-10-11 10:06:30 发布

cc蒲公英

最新推荐文章于 2023-10-11 10:06:30 发布

阅读量766

点赞数

position: absolute;和fixed.两种方法！

html：

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 
     
     
      
      <!DOCTYPEhtml>
<htmllang="en">
<head>
    <title> back2Top jquery html www.jiuni.com.cn </title>
    <metacharset="utf-8"/>
    
<style>
/*backtoTop*/
.backtoTop1{
    height:40px;
    width:50px;
    position:absolute; //绝对定位
    padding-top:8px;
    right:10px;
    z-index:9999;
     /*避免闪烁*/
    -moz-transition:all1s ease;
    -webkit-transition:all1s ease;
    -o-transition:all1s ease;
    transition:all1s ease;
    /*避免闪烁*/
    background:blue;
    cursor:pointer;
    text-align:center;
}
.backtoTop2{
    height:40px;
    width:50px;
    position:fixed;     //固定定位
    bottom:50px;
    right: 10px;
    padding-top:8px;
    right:100px;
    z-index:9999;
    background:red;
    cursor:pointer;
    text-align:center;
}
</style>
</head>
<body>
    <!--contenter-->
    <divstyle="width: 100%; height: 2000px;"></div>
 
    <!--backtoTop1-->
    <!--兼容所有现代浏览器同时包括 ie6/7/8/9 （ie6会有一点点抖动）-->
    <divid="backToTop1"class="backtoTop1"></div>
 
 
    <!--backtoTop2-->
    <!--兼容所有现代浏览器同时包括 ie7以上 -->
    <divid="backToTop2"class="backtoTop2"></div>
 
    <scriptsrc="js/jquery.min.js"></script>
    <scriptsrc="js/main.js"></script>
</body>
</html>
      
       
        
      
      
       
        
      
     
     


main.js :


/**
 * backToTop1
 * 跟随一起滑动，滑哪跟哪
 */
$(document).ready(function(){
    $(window).scroll(function() {               //滚动时触发
        vartop = $(document).scrollTop(),       //获取滚动条到顶部的垂直高度
            height = $(window).height();         //获得可视浏览器的高度
        if(top > 100){
            $("#backToTop1").show(200,function(){
                $("#backToTop1").css({
                    top: height + top - 80
                })
            });
        }
    });
    /*点击回到顶部*/
    $('#backToTop1').click(function(){
        $('html, body').animate({
            scrollTop: 0
        }, 500);
    });
});


/**
 * backToTop2
 * 固定的，默认显示，直到回滚到一定距离消失
 */
$(document).ready(function(){
    $(window).scroll(function() {               //滚动时触发
        vartop = $(document).scrollTop();       //获取滚动条到顶部的垂直高度
        if(top > 100){                           //到一定高度显示
            varheight = $(window).height();     //获得可视浏览器的高度
            $("#backToTop2").fadeIn(300).css({
                top: height-80
            });
        }
        if(top < 100){                            //小于100消失
            $("#backToTop2").fadeOut(200);
        }
    });
    /*点击回到顶部*/
    $('#backToTop2').click(function(){
        $('html, body').animate({
            scrollTop: 0
        }, 500);
    });
});