Question

所以我正在使用pjax，所以当用户点击链接而不是加载新页面时，它会将内容拖入。内容的顶部有一个导航栏，下面是内容。点击它隐藏的导航栏并显示某些内容..工作正常。

我的问题。当内容被拖入时，我希望页面直接滚动到导航栏而不是粘在页面顶部，用户需要滚动到它。我用过：

$(function() {
 $('html, body').animate({
    scrollTop: $('#in-page-nav').offset().top}, 1000);
});

要滚动到页面加载上的div，它在刷新页面时工作正常。但是当pjax将内容拉入页面时不起作用。

任何帮助我都会非常感激，谢谢！

Answer 1

您可以在pjax:success事件中制作动画。 pjax:success被解雇了：

替换从服务器加载的HTML内容后

示例

$(document).on('pjax:success', function() { // Your scroll animation here. })

有关详细信息，请参阅Pjax events。

Answer 2

<强>固定

好的，所以我不确定是否有人有这个问题，但仅仅是为了参考，如果有人遇到这个问题，那就是我所做的：

我查看了pjax文档;

完成 - 当AJAX请求完成时成功 - 当AJAX请求成功完成时

是可以使用的两个回调。

pjax.connect({
    'success': function(e){
        window.location.hash = $('#in-page-nav a').eq(0).attr('href');
        // $(function() {
        $('html, body').animate({
                scrollTop: $('#in-page-nav').offset().top}, 1000);
        },
});

所以我之前的代码动画滚动到页面加载的div复制了它并将其放在pjax.connent中并使用了成功回调。这非常有效。我保持代码在页面加载时设置动画，因此如果用户为链接添加书签或发送链接并直接使用链接。然后页面将加载相同的内容。

感谢您的快速回复！

使用pjax时，在页面加载时滚动到div

2 个答案: