返回顶部

最新推荐文章于 2022-10-13 12:45:09 发布

jiaqi2016

最新推荐文章于 2022-10-13 12:45:09 发布

阅读量253

点赞数

分类专栏：备忘

本文链接：https://blog.csdn.net/u010507920/article/details/52718266

版权

备忘专栏收录该内容

23 篇文章 0 订阅

订阅专栏

备忘：

<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <script src="js/jquery-1.11.3.js"></script>
</head>
<style>
    body{
        height: 1880px;
    }
    .box1{
        width: 100%;
        height: 800px;
        background: #f00;
    }
    .box2{
        width: 100%;
        height: 800px;
        background: green;
    }
    .box3{
        width: 100%;
        height:800px;
        background: orange;
    }
    #gotoTop{
        display:none;
        position:fixed;
        top:75%;
        right:20px;
        cursor:pointer;
        padding:9px 4px;
        width:20px;
        text-align:center;
        border:1px solid #e0e0e0;
        background:#fff;
    }
    /*用CSS表达式(expression)来实现ie6下position:fixed效果*/
    #gotoTop{
        _position:absolute;
        _top:expression(documentElement.scrollTop + documentElement.clientHeight * 3/4 + "px")
    }
    /*鼠标进入的反馈效果*/
    #gotoTop.hover{background:#5CB542;color:#fff;text-decoration:none;}
</style>
<body>
<div id="page"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
<script>
    function gotoTop(min_height){
        //预定义返回顶部的html代码，它的css样式默认为不显示
        var gotoTop_html = '<div id="gotoTop">返回顶部</div>';
        //将返回顶部的html代码插入页面上id为page的元素的末尾
        $("body").append(gotoTop_html);
        $("#gotoTop").click(//定义返回顶部点击向上滚动的动画
                function(){$('html,body').animate({scrollTop:0},200);
                }).hover(//为返回顶部增加鼠标进入的反馈效果，用添加删除css类实现
                function(){$(this).addClass("hover");},
                function(){$(this).removeClass("hover");
                });
        //获取页面的最小高度，无传入值则默认为600像素
        min_height ? min_height = min_height : min_height = 600;
        //为窗口的scroll事件绑定处理函数
        $(window).scroll(function(){
            //获取窗口的滚动条的垂直位置
            var s = $(window).scrollTop();
            //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐
            if( s > min_height){
                $("#gotoTop").fadeIn(100);
            }else{
                $("#gotoTop").fadeOut(200);
            };
        });
    };
    gotoTop(940);

</script>