Как сделать в jquery плавный скролинг к якорю?

Пользователь

от deion , в категории: JavaScript , 9 месяцев назад

Как сделать в jquery плавный скролинг к якорю?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от clifford , 9 месяцев назад

@deion 

Cуществует несколько способов сделать плавный скроллинг к якорю с использованием jQuery. Один из них выглядит следующим образом:


HTML:

1
2
3
4
5
Перейти к разделу 1


  


JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
$(document).ready(function() {
  // При клике на ссылку с классом "scroll"
  $(".scroll").click(function(event) {
    // Отменяем стандартное поведение ссылки
    event.preventDefault();
    // Получаем id якоря из атрибута href
    var sectionId = $(this).attr("href");
    // Используем метод animate для плавного скроллинга к якорю
    $("html, body").animate({
      scrollTop: $(sectionId).offset().top
    }, 1000); // Время прокрутки в миллисекундах
  });
});


В данном примере при клике на ссылку с классом "scroll" происходит анимированная прокрутка к соответствующему якорю (определенному по href). Важно, чтобы якорище совпадало с id соответствующего раздела, к которому нужно прокрутить. Вместо 1000 можно задать собственное время прокрутки.