Question

我有一个网页，当点击时，使用jquery向下滚动到页面上的其他（动态加载的）元素（点击一个项目后，一些ajax加载到页面上的一些其他元素，然后向下滚动到第一个这些新添加的元素中的项目。）

一切正常，除了在IOS Safari上，如果我使用点击状态栏滚动到页面顶部（正常的ios行为），当我然后点击我的任何链接，而Ajax确实加载到新的元素，jquery scrollTop不再有效，我仍然卡在页面的顶部（除非我然后手动滚动）。但是，如果我只滚动1px，然后单击任何链接，jquery scrollTop再次工作。就像，每当使用IOS状态栏滚动到顶部功能时，它会将其锁定在顶部，直到您手动滚动（即使只有1px），然后javascript滚动再次工作！

我已经在iPhone上的Chrome下对它进行了测试，一切正常，它似乎只是在Safari下。

这是一个jquery的例子，一旦点击了我的一个链接（并通过ajax将新元素加载到页面上），它就滚动到新添加的元素：

$('ul.c1 a').click(function () {
        $('html, body').delay(250).animate({
            scrollTop: $('.c2').offset().top
        }, 200);
    });

Answer 1

我通过在scrollTop上调用jquery.animate之前调用window.scroll（0,1）来“重置”滚动来解决这个问题。它适用于我，因为我的导航是由选择下拉列表触发的，它始终位于页面顶部。

$select.on('click', function(){
     window.scroll(0, 1);
});

$select.on('change', function(){
    var $this   = $(this),
        idx     = $this.prop("selectedIndex") - 1,
        dist    = $timeline.find('.chapter').eq(idx).position().top;

    $this.prop("selectedIndex", 0);

    $('html, body').stop(true).animate({scrollTop: dist}, 250);
});

IOS Safari滚动到顶部打破jquery scrollTop

1 个答案: