JavaScript 判断滚动条是否滚动到最底部

<!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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/280.html