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

我试图在我的网站上创建流畅的页面转换，以便用户在点击指向其他页面的链接时不会感觉到“页面加载”。我想要的两个例子是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); 
    }); 

});

上面的代码不工作，当您单击与类的链接不会出现滚动;但是，如果我使用防止默认值，那么页面会滚动到顶部，但当然由于使用preventDefault禁用了链接，所以下一页不会打开。

请让我知道，如果你能帮助。谢谢。

来源

2015-04-23 Sameer Zahid

你是正确的，你将需要使用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; 
});

来源

2015-04-23 08:19:36

我复制你的代码，它的工作完美，即便是不添加'preventDefault'。但是，我只关心使用'window.location.href'使链接工作是否有风险。如果有人禁用JavaScript或使用旧浏览器或其他东西，我是否需要担心链接无法正常工作？谢谢！ –

@SameerZahidd：不，你仍然会有优雅的退化，因为如果javascript没有启用，点击将不会被拦截。右键单击“在新选项卡中打开”等仍然有效，因为地址在'href'中指定（但不会启动滚动）。这种方法会失去什么是原始链接的“目标”。如果这对你很重要，你可以尝试使用[.one]（http://api.jquery.com/one/）仅捕获第一次点击，然后在该事件结束时手动调用'click'。但是如果你不依赖'target'，我会说上面的解决方案更简洁。 –

好吧，这是有道理的，没有目标对我来说不重要。我只是使用你上面显示的内容。非常感谢！ –

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));

来源

2015-04-23 08:20:44 Tushar

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

回答

相关问题