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

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

deion

от deion , в категории: JavaScript , год назад

12 | 0

jquery

2 ответа

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

clifford

от clifford , год назад

@deion

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

HTML:

Перейти к разделу 1

JavaScript:

$(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 можно задать собственное время прокрутки.

1 | 0

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

cayla

от cayla , 4 месяца назад

@deion

Вот пример HTML кода, для прокрутки к якорю по клику на ссылку:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Scroll Demo</title>
<style>
  section {
    height: 800px;
  }
</style>
</head>
<body>

<nav>
  <ul>
    <li><a href="#section1" class="scroll">Перейти к разделу 1</a></li>
    <li><a href="#section2" class="scroll">Перейти к разделу 2</a></li>
  </ul>
</nav>

<section id="section1" style="background: #f0f0f0;">Раздел 1</section>
<section id="section2" style="background: #ccc;">Раздел 2</section>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $(".scroll").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    }
  });
});
</script>

</body>
</html>

В этом примере при клике на ссылку "Перейти к разделу 1" или "Перейти к разделу 2", страница плавно проскроллится к соответствующему разделу.

0 | 0

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

2 ответа

Похожие обсуждения: