当用户点击链接时,如何在转到其他页面之前滚动到顶部？

Question

我正在尝试在我的网站上创建平滑的页面转换,以便用户在单击指向其他页面的链接时不会感觉到"页面加载".我想要的两个例子是minimalissimo.com和defringe.com.当您在这些网站的任何页面上单击指向其他文章的链接时,该页面会在下一页开始加载之前将滚动设置为顶部.

到目前为止,我有以下代码:

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

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

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

});

上面的代码不起作用,单击与该类的链接时不会发生滚动; 但是,如果我使用prevent default,那么页面会滚动到顶部,但当然下一页没有打开,因为使用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;
});