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

这些功能在桌面版中运行良好，但在移动设备上却很困难（特别是在页面顶部）。滚动类型的工作，页面将向下滚动 - 但我注意到html元素上没有发生转换。

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

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

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

Answer 1

＆＃34;这些功能在桌面版中运行良好但在移动设备上很难（尤其是在页面顶部）＃34;

我并不完全确定你的问题是专门提出的问题 - 但我相信你所谈论的是动画在滚动页面时是不稳定的，或者当你说它“挣扎”时。

使用移动设备时的一般规则 - CSS动画总能获胜。这是因为通过CSS动画的任何内容都可以利用设备GPU加速硬件的优势。这意味着CSS动画看起来非常流畅，而.animate（）方法则不太可靠，而且看起来很不稳定。

虽然我没有代码示例，但我确实有一个链接可以更详细地描述这一点，我相信它会让你找到正确的方向来解决你的问题＆＃34;苦苦挣扎＆＃ 34;的问题。

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

它讨论了一个名为Velocity的漂亮的JS库 - https://github.com/julianshapiro/velocity

将此小脚本添加到您的网站并替换＆＃34; .animate（）＆＃34;的所有实例。用＆＃34; .velocity（）＆＃34;它应该解决你的问题。

就像我说的那样，由于问题的措辞，我不确定这个答案是否是你所追求的。希望它有所帮助。

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

2 个答案: