js判断滚动条是否到底部

版权声明:学习交流。。 https://blog.csdn.net/qq_38881495/article/details/83547749

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<title>js判断滚动条是否到底部</title>
<style>
    .bottom{ 
        width: 500px; 
        height: 50px; 
        position: fixed; 
        left: 50%; 
        margin-left: -250px; 
        top: 50%; 
        background: #f00; 
        color: #fff; 
        line-height: 50px; 
        text-align: center; 
        border-radius: 5px; 
        display: none;
    }
</style>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    var timer;
    $(window).bind('scroll',function(){
        clearTimeout(timer);
        timer = setTimeout(function(){
            if($(window).scrollTop()+$(window).height()==$(document).height()){ 
                alert("已经到底部了");
                $(".bottom").fadeIn();
            }else{
                $(".bottom").fadeOut();
            }
        },300)
    }); 
</script>
</head>
<body>
    <div style="width: 100%; height: 2000px;">
        滚动到底部试试~!
    </div>
    <div class="bottom">滚动条,已经到底部了!</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_38881495/article/details/83547749