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