jQuery не запускает событие в состоянии зависания

Question

В настоящее время я пытаюсь создать навигационное меню, которое нажимает прокрутки до div, расположенного ниже на странице. Первоначально он работал, но когда я добавил переход CSS для выделения текста, jQuery больше не будет запускать прокрутку при нажатии на него.

$("#about, #about:hover").click(function() { 
    $('html,body').animate({ 
     scrollTop: $("#box1").offset().top}, 
     'slow'); 
}); 

#about идентификатора является частью меню навигационного и выберите #box1 по щелчку. Я попытался добавить состояние зависания в селектор, изменив его на .trigger, а не на .click, но я не вижу простого решения. Я воссоздал событие в Chrome, Safari и использовал JSFiddle.

Является ли JQuery конфликтующим с переходом, состоянием зависания или моим кодом вообще?

EDIT: Он работает в примере Fiddle, но событие не происходит, когда производится локально (все связано и корректно, без ошибок в консоли).

Answer 1

Ваш код JS запускается до полной загрузки DOM.

Поместите JS внутри document.ready();:

$(document).ready(function() { 
    $("#about, #about:hover").click(function() { 
     $('html,body').animate({ 
      scrollTop: $("#box1").offset().top 
     }, 
      'slow'); 
    }); 

    $("#portfolio, #portfolio:hover").click(function() { 
     $('html,body').animate({ 
      scrollTop: $("#box2").offset().top 
     }, 
      'slow'); 
    }); 

    $("#social, #social:hover").click(function() { 
     $('html,body').animate({ 
      scrollTop: $("#box3").offset().top 
     }, 
      'slow'); 
    }); 

    $("#contact, #contact:hover").click(function() { 
     $('html,body').animate({ 
      scrollTop: $("#box4").offset().top 
     }, 
      'slow'); 
    }); 
}); 

Смотрите обновленный JSFiddle

Answer 2

Это не работает, если ваша ссылка JQuery и/или функции ссылку в заголовке.

Это работает для меня, если ссылки js находятся ближе к концу вашего html, как перед тегом закрывающего тега.