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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

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

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

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

от cayla , 12 дней назад

@deion 

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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", страница плавно проскроллится к соответствующему разделу.