2016-04-10 2 views
4

Я пытаюсь вызвать предупреждение, когда я доберусь до нижней части страницы. Но по какой-то причине он вызывает предупреждение, когда я просматриваю верхнюю часть страницы. Он работает в IE, но когда я использую код в chrome или Mozilla, это не так.Предупреждение при достижении нижней части страницы, когда я нахожусь наверху

Я также замечаю, что если я увеличиваю цвет на хроме или вне его, он перестает работать и в верхней части страницы. Я искал ответы для этого и видел ссылки на подобные проблемы, но как таковые не нашел ответа.

Если кто-нибудь может пролить свет на это, я бы очень признателен. Вот код JS, который я использовал.

<script type="text/javascript"> 
    $(document).ready(function(){ 
    var load = 0; 
    var nbr = '1'; 
    $(window).scroll(function(){ 
     if($(window).scrollTop() == $(document).height() - $(window).height()){ 
     alert(nbr); 
     } 
    }); 
    }); 
</script> 
+1

Это, кажется, работает в Chrome .. http://jsbin.com/kehemej –

+0

Спасибо. Хотя он не ответил на мой вопрос, он указал мне на проблему с другим кодом, который у меня был. Теперь это исправлено. – Niall

+1

Не обрабатывайте подобные события прокрутки, это невероятно плохо для производительности. http://ejohn.org/blog/learning-from-twitter/ – CBroe

ответ

2

Вы должны дать вашему документу тип документа для $(window).height() работать, как вы намерены:

<!DOCTYPE html> 

Добавляя это вы соблюдение строгого режима, в отличие от режима причуды.

JQuery не поддерживает режим совместимости, как описано в jQuery 1.8.1 release notes:

Не используйте Quirks mode! jQuery никогда не поддерживал режим Quirks, и мы не проводим никаких тестов в Quirks. Это может повлиять на значения, как $("window").height()

+0

Ницца! я бы никогда не догадался. Как вы это понимаете? –

+0

Добро пожаловать. Имел тот же вопрос некоторое время назад. – trincot

0
<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $('a[rel="relativeanchor"]').click(function(){ 
     $('html, body').animate({ 
     scrollTop: $($.attr(this, 'href')).offset().top 
     }, 500); 
     return false; 
    }); 
    }); 
    </script> 
    <style media="screen"> 
    body { background-color: #000; color: #fff; } 
    a { color: aqua; } 
    </style> 
</head> 
<body> 
    <body> 
    <h1 id="top">How to make smooth scrolling.</h1> 
    <a href="#mysection1" rel="relativeanchor">Section 1</a> 
    <a href="#mysection2" rel="relativeanchor">Section 2</a> 
    <div style="height: 1500px;">This requires jQuery. <a href="#top" rel="relativeanchor">Go Back to Top</a></div> 
    <div id="mysection1">Section 1</div> 
    <div style="height: 1500px;">This requires jQuery. <a href="#top" rel="relativeanchor">Go Back to Top</a></div> 
    <div id="mysection2">Section 2</div> 
    <a href="#top" rel="relativeanchor">Go Back to Top</a> 
    </body> 
</body> 
</html> 
Смежные вопросы