滚动到移动设备中的元素 ID

Question

我在移动设备上使用 skrollr 时遇到问题。我已附上

id="skrollr-body"

到 html 元素（白屏和其他奇怪的行为，如果我将它附加到正文），这允许我的响应式网站滚动。我已附上

s.refresh();

任何更改元素高度的 js 函数，以便始终正确计算出页面高度。这一切似乎都很好地工作，除了我有两个函数应该通过它们的 ID 滚动到元素。

jQuery(".scrolldown").click(function() {
    jQuery('html, body').animate({
        scrollTop: jQuery("#article-bottom").offset().top
    }, 800);
});

jQuery(".scrollup").click(function() {
    jQuery('html, body').animate({
        scrollTop: jQuery("#article-top").offset().top
    }, 800);
});

这些功能在桌面版中运行良好，但在移动版中表现不佳（尤其是在页面顶部）。 scrolldown 类型的作品，因为页面将向下滚动 - 但我注意到 html 元素上没有发生任何转换。

这意味着一旦我向下滚动，我就无法向上滚动，因为转换仍然是 0,0。我试过了

jQuery(".scrolldown").click(function() {
    jQuery('html, body').animate({
        scrollTop: jQuery("#article-bottom").offset().top
    }, 800);
    s.refresh();
});

在动画之后（和之前）添加 s.refresh() 但我很难过。我认为这些功能应该在移动设备（如主页）中使用转换，但我不知道我是否正确编写了这些功能。

Answer 1

"These functions work nicely in desktop version but struggle in mobile (particularly going up to the top of the page)"

我不完全确定你的问题具体在问什么 - 但我相信你说的是滚动页面时动画不稳定，或者如你所说 'struggling'.

使用移动设备时的一般规则 - CSS 动画总是胜出。这是因为任何通过 CSS 动画的东西都可以利用设备 GPU 的硬件加速。这意味着 CSS 动画看起来非常流畅，而 .animate() 方法不太可靠并且经常看起来不稳定。

虽然我没有相应的代码示例 - 我确实有一个 link 更详细地描述了这一点，我相信它会让您朝着正确的方向前进，以修复您的 "struggling" 个问题。

http://www.sitepoint.com/easily-improving-jquery-animations/

它谈到了一个名为 Velocity 的不错的 JS 库 - https://github.com/julianshapiro/velocity

将这个小脚本添加到您的站点并将“.animate()”的所有实例替换为“.velocity()”，它应该可以解决您的问题。

就像我说的，由于您问题的措辞，我不确定这个答案是否是您想要的。希望它有所帮助。

Answer 2

我已经解决了这个问题。首先，我阅读了文档。其次，我包含了 skrollr.menu.min.js 并添加了这样的代码。

jQuery(".scrolldown").click(function() {
    jQuery('html, body').animate({
        scrollTop: jQuery("#article-intro").offset().top
    }, 800);
});

var s = skrollr.init({forceHeight: false});

skrollr.menu.init(s, {
    animate: true,
    easing: 'sqrt',
    scale: 2,
    duration: function(currentTop, targetTop) {return 800;}
});

滚动到移动设备中的元素 ID

Scroll to element IDs in mobile

jquery

skrollr