当用户单击 link 时，如何在转到不同页面之前滚动到顶部？

Question

我试图在我的网站上创建平滑的页面转换，这样当 he/she 单击 link 到另一个页面时，用户不会感觉到 "page load"。我想要的两个例子是 minimalissimo.com and defringe.com。当您在这些网站的任何页面上单击 link 到另一篇文章时，该页面会在下一页开始加载之前滚动到顶部。

到目前为止我有以下代码：

jQuery(document).ready(function($){

  $back_to_top = $('.link-to-article');

  $back_to_top.on('click', function(){
    $("html, body").animate({scrollTop:0},260);
  });

});

上面的代码不起作用，当你用class点击link时没有滚动发生；但是，如果我使用 prevent default，那么页面会滚动到顶部，但当然下一页不会打开，因为 link 被 preventDefault.

禁用了

如果您能提供帮助，请告诉我。 谢谢。

Answer 1

您说得对，您需要使用 preventDefault，但您还需要在动画完成后手动重定向：

$back_to_top.on('click', function(){
   var href = $(this).attr('href');
   $(document.body).animate({scrollTop:0}, 260, function() {
      window.location.href = href;
   });
   return false;
});

Answer 2

jQuery(document).ready(function ($) {
    $back_to_top = $('.link-to-article');

    $back_to_top.on('click', function (e) {
        e.preventDefault();
        $this = $(this);
        $("html, body").animate({
            scrollTop: 0
        }, 260, function() {
            window.location.href = $this.attr('href');
        });
    });
}(jQuery));