IOS Safari滚动到顶部打破jquery scrollTop答案

【问题标题】：IOS Safari Scroll to Top breaking jquery scrollTopIOS Safari滚动到顶部打破jquery scrollTop
【发布时间】：2013-11-28 15:10:33
【问题描述】：

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

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

我在 iPhone 上的 Chrome 下测试过，一切正常，只是看起来在 Safari 下。

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

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

【问题讨论】：

我也有同样的问题。是的，这是一个野生动物园的事情。

标签： jquery ios scrolltop

【解决方案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);
});

【讨论】：