Hi I inserted 2 scripts into HTML: one to fix the menu and the second to smoothly move around the anchor page for the second for some reason it does not work and after clicking on one of the menu buttons nothing happens but when I remove it everything works as if only there is no smooth movement. Here are both scripts (in navigation, it is correct, help please)

<!--Закрепить окно сверху--> <script> var h_hght = 110; // высота шапки var h_mrg = 0; // отступ когда шапка уже не видна $(function(){ var elem = $('#top_nav'); var top = $(this).scrollTop(); if(top > h_hght){ elem.css('top', h_mrg); } $(window).scroll(function(){ top = $(this).scrollTop(); if (top+h_mrg < h_hght) { elem.css('top', (h_hght-top)); } else { elem.css('top', h_mrg); } }); }); </script> <!--Плавный скролл--> <script> $(document).ready(function(){ $("#top_nav").on("click","a", function (event) { //отменяем стандартную обработку нажатия по ссылке event.preventDefault(); //забираем идентификатор бока с атрибута href var id = $(this).attr('href'), //узнаем высоту от начала страницы до блока на который ссылается якорь top = $(id).offset().top; //анимируем переход на расстояние - top за 1500 мс $('body,html').animate({scrollTop: top}, 500); }); }); </script>
  • Bring in question the element "#top_nav" with content - Anton Shchyrov
  • Is there an error in the console? - Kirill Korushkin

1 answer 1

Your example works. So the question is - jQuery hooked up?

 $("#top_nav").on("click", "a", function(event) { event.preventDefault(); var id = $(this).attr('href'), top = $(id).offset().top; $('body,html').animate({ scrollTop: top }, 500); }); 
 #qwe { position: absolute; top: 1000px } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="top_nav"> <a href="#qwe">to qwe</a> </div> <div id="qwe">qwe</div>