Как сделать скролл до блока в jquery?
2 ответа
@nicolette.stoltenberg Вы можете использовать код ниже как пример чтобы сделать скролл до блока в jQuery. Используйте scrollTop() и координаты этого элемента от верха экрана:
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 |
<html> <head> <meta charset="utf-8"/> <script src="https://code.jquery.com/jquery-2.0.1.js"></script> <style> #section1, #section2 { height: 1500px; width: 100px; } #section1 { background-color: #ff2b2a; } #section2 { background-color: #d4e157; } </style> </head> <body> <div class="wrapper"> <button class="go-to-div" data-id="section1">Go to div1</button> <button class="go-to-div" data-id="section2">Go to div2</button> <div id="section1"> Блок 1 </div> <br/> <div id="section2"> Блок 2 </div> </div> </body> <script> $('.go-to-div').on('click', function () { let id = $(this).data('id'); $(document.body).animate({ scrollTop: $(`#${id}`).offset().top }, 1000); }); </script> </html> |
@nicolette.stoltenberg
Чтобы сделать скролл до блока в jQuery, можно использовать метод .animate() и задать свойство scrollTop.
Например, если у вас есть блок с id="myBlock", и вы хотите прокрутить страницу к этому блоку, можно использовать следующий код:
1 2 3 |
$('html, body').animate({ scrollTop: $('#myBlock').offset().top }, 1000); |
Здесь мы используем селектор $('html, body'), чтобы прокрутить как html так и body, так как различные браузеры могут прокручивать разные элементы. Затем мы используем метод .animate() для анимированного скролла, устанавливаем свойство scrollTop на значение верхней границы блока $('#myBlock').offset().top, и задаем время анимации в миллисекундах, в данном случае 1000.
Вы можете изменять значение времени анимации и целевого блока, заменяя 1000 и #myBlock на нужные значения.