Не работает скрипт плавной прокрутки

180

13 ноября 2018, 16:20

Не работает скрипт плавной прокрутки к нужному элементу на странице, вместо плавной прокрутки при нажатии на кнопку, срабатывает мометальная прокрутка, и меня перенаправляет на элемент, id которого я указал. Код внизу

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#menu").on("click", "a", function(event) {
                //отменяем стандартную обработку нажатия по ссылке
                event.preventDefault();
                //забираем идентификатор бока с атрибута href
                var id  = $(this).attr('href'),
                    // узнаем высоту от начала страницы до блока 
                    // на который ссылается якорь
                    top = $(id).offset().top;
                //анимируем переход на расстояние - top за 1500 мс
                $('body,html').animate({
                    scrollTop: top
                }, 1500);
            });
        });
    </script>

Answer 1

Все работает, проблема на вашем сайте

$(document).ready(function() { 
  $("#menu").on("click", "a", function(event) { 
    //отменяем стандартную обработку нажатия по ссылке 
    event.preventDefault(); 
    //забираем идентификатор бока с атрибута href 
    var id = $(this).attr('href'), 
      //узнаем высоту от начала страницы до блока на который ссылается якорь 
      top = $(id).offset().top; 
    //анимируем переход на расстояние - top за 1500 мс 
    $('body,html').animate({ 
      scrollTop: top 
    }, 1500); 
  }); 
});

#menu { 
  position: fixed; 
  left: 0; 
  top: 0; 
} 
 
section { 
  height: 400px; 
  border-bottom: 100px solid green; 
  /*font-size: 100px; 
color: green;*/ 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<nav id="menu"> 
  <ul> 
    <li><a href="#ex1">Link #1</a></li> 
    <li><a href="#ex2">Link #2</a></li> 
    <li><a href="#ex3">Link #3</a></li> 
    <li><a href="#ex4">Link #4</a></li> 
  </ul> 
</nav> 
 
 
<div id="content"> 
  <section id="ex1"> 
    ... 
  </section> 
  <div class="separator"></div> 
  <section id="ex2"> 
    ... 
  </section> 
  <div class="separator"></div> 
  <section id="ex3"> 
    ... 
  </section> 
  <div class="separator"></div> 
  <section id="ex4"> 
    ... 
  </section> 
</div>

Answer 2

this может ссылаться к window. Отлавливайте нажатую ссылку через event.target.

$(".limit.items > div > a").on("click", (e) => {
    e.preventDefault();
    let id = $(e.target).attr('href'), top = $(id).offset().top;
    $('body,html').animate({scrollTop: top}, 1500);
});