Вопрос: Перейдите в начало страницы с помощью JavaScript / jQuery?


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

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


1245


источник


Ответы:


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

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

параметры

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

1710



Если вам нужна плавная прокрутка, попробуйте что-то вроде этого:

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

Это займет какое- <a>тег href="#top"и сделайте его гладким, прокрутите вверх.


1165



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

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

120



Для этого вам не нужен jQuery. Стандартный HTML-тег будет достаточно ...

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

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

81



All of these suggestions work great for various situations. For those who find this page through a search, one can also give this a try. JQuery, no plug-in, scroll to element.

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

46



smooth scroll, pure javascript:

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

28



<script>

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

in html

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

25



If you want to do smooth scrolling, please try this:

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

Another solution is JavaScript window.scrollTo method :

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

Parameters :

  • x-value is the pixel along the horizontal axis.
  • y-value is the pixel along the vertical axis.

22



With window.scrollTo(0, 0); is very fast
so i tried the Mark Ursino example, but in Chrome nothing happens
and i found this

$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});

tested all 3 browsers and it works
i'm using blueprint css
this is when a client clicks "Book now" button and doesn't have the rental period selected, slowly moves to the top where the calendars are and opens a dialog div pointing to the 2 fields, after 3sec it fades


21



A lot of users recommend selecting both the html and body tags for cross-browser compatibility, like so:

$('html, body').animate({ scrollTop: 0 }, callback);

This can trip you up though if you're counting on your callback running only once. It will in fact run twice because you've selected two elements.

If that is a problem for you, you can do something like this:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    $('body').animate({ scrollTop: 0 }, callback);
}

The reason this works is in Chrome $('html').scrollTop() returns 0, but not in other browsers such as Firefox.

If you don't want to wait for the animation to complete in the case that the scrollbar is already at the top, try this:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}

21