Question

有没有办法用jQuery以编程方式滚动到页面顶部？我目前正在尝试使用以下代码执行此操作，但它无法正常工作。我目前正在使用Firefox，

$(window).scrollTop($(document).height());

Answer 1

试试这个：

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

您可以使用0代替300来实现此目标，但这会提供快速自动滚动效果。

Answer 2

只需在尼克的好答案中添加一个片段。只有在用户向下滚动页面之后，才会显示“滚动到顶部”元素，即Pinterest风格。

  $("#scroll_to_top_button").hide(); // hide on page load

  $(window).bind('scroll', function(){
    if($(this).scrollTop() > 200) { // show after 200 px of user scrolling
      $("#scroll_to_top").slideDown("fast");
   }
  });

Answer 3

这里不需要jQuery。使用原生：

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

请注意，这无法控制jQuery提供的动画部分（持续时间等）

Answer 4

$('a[href^="#"]').on('click', function(event) {

var target = $(this.getAttribute('href'));

if( target.length ) {
    event.preventDefault();
    $('html, body').stop().animate({
        scrollTop: target.offset().top
    }, 1000);
}

}）;

将其添加到HTML

<div id="top"></div>
<a href="#top">Click to scroll up</a>

JQuery滚动到页面顶部

4 个答案: