Как сделать скролл до элемента в jquery?
2 ответа
@carlo.cummerata Используйте комбинацию animate() функции в 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 |
<html> <head> <meta charset="utf-8"/> <script src="https://code.jquery.com/jquery-2.0.1.js"></script> <style> .section { height: 1500px; width: 100px; background-color: #ff2b2a; } </style> </head> <body> <div class="wrapper"> <button class="scroll-button">Скроллить до элемента</button> <div style="height:300px"></div> <div class="section"> Тестовый элемент </div> </div> </body> <script> $('.scroll-button').on('click', function () { $(document.body).animate({ scrollTop: $('.section').offset().top }, 1000); }); </script> </html> |
@carlo.cummerata
Чтобы прокрутить страницу к определенному элементу в jQuery, можно использовать метод scrollTop с анимацией animate. Вот пример кода:
1 2 3 |
$('html, body').animate({ scrollTop: $('#your-element').offset().top }, 1000); // время анимации в миллисекундах |
В этом примере мы используем $('html, body'), чтобы анимировать прокрутку на обеих основных элементах страницы. Затем мы используем метод animate, чтобы сделать плавную анимацию прокрутки, указывая объект свойств для анимации. Здесь мы указываем свойство scrollTop со значением смещения от верхней границы страницы до элемента с помощью метода offset.
Замените #your-element на селектор своего элемента и укажите нужное время анимации в миллисекундах.