Прокрутите страницу вверх, используя JavaScript / jQuery?

Question

У меня на странице <button>, при нажатии этой кнопки скрытый <div> отображается с помощью jQuery.

Как мне прокрутить вверх страницу, используя команду JavaScript / jQuery в этой функции? Желательно, даже если полоса прокрутки мгновенно прыгает наверх. Я не ищу плавной прокрутки.

Answer 1

Если вам не нужны изменения для анимации, вам не нужно использовать какие-либо специальные плагины - я бы просто использовал собственный метод JavaScript window.scrollTo - передача 0,0 приводит к прокрутке страницы до вверху слева мгновенно.

window.scrollTo(x-coord, y-coord);

Параметры

• х-координата - это пиксель вдоль горизонтальной оси.
• y-координата - это пиксель вдоль вертикальной оси.

Answer 2

Если вы хотите плавную прокрутку, попробуйте что-то вроде этого:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Это возьмет любой тег <a>, чей href="#top", и сделает его плавным, прокручивая вверх.

Answer 3

Попробуйте прокрутить сверху

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

Answer 4

Вам не нужен jQuery для этого. Достаточно стандартного HTML-тега ...

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

Answer 5

Все эти предложения отлично подходят для различных ситуаций. Для тех, кто находит эту страницу с помощью поиска, можно также попробовать this . JQuery, без плагина, выделите элемент.

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

Answer 6

Лучшее решение с плавной анимацией:

// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });

Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example

Answer 7

плавная прокрутка, чистый JavaScript:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

Answer 8

Если вы хотите сделать плавную прокрутку, попробуйте это:

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

Другим решением является метод JavaScript window.scrollTo:

 window.scrollTo(x-value, y-value);

Параметры:

• x-значение - это пиксель по горизонтальной оси.
• y-значение - это пиксель вдоль вертикальной оси.

Answer 9

<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

в html

<a href="#top">go top</a>

Answer 10

Действительно странно: этот вопрос активен в течение пяти лет, и до сих пор нет ванильного ответа JavaScript для анимации прокрутки ... Итак, вы идете:

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

Если хотите, вы можете обернуть это в функцию и вызвать ее через атрибут onclick. Проверьте это jsfiddle

Примечание. Это очень простое и, возможно, не самое эффективное решение. Очень сложный пример можно найти здесь: https://github.com/cferdinandi/smooth-scroll