Question

在我的练习页面中，我有一个平滑的滚动功能，似乎运行得相当好。它的代码如下。

$(function () {
     $('a[href*="#"]').click(function () {
        var $target = $(this.hash);
        $target = $target.length ? $target : $('html');
        var targetOffset = $target.offset().top + 1;
        $('html,body').animate({scrollTop: targetOffset}, {duration: 1500, easing: 'easeInOutCubic'});
        return false;
     });
});

当我在不同的设备上进行测试时，我注意到会有一些轻微的差异，这可能会影响将来的其他功能。当我的滚动脚本在某些设备上激活时，它将滚动到它的意图。但是在一些设备上它会滚动到一个略低于滚动位置的点。这将留下可能只有前一部分的一个或两个像素的小条带。为了解决这个问题，我通常可以在目标位置添加或减去1或2个像素，就像我在下面的脚本中所做的那样。

{{1}}

像这样做的问题就像我之前所说的那样，问题不影响所有设备，我不知道是什么让设备的工作方式不同，除了屏幕尺寸/分辨率。

这是一个https://doc.sitecore.net/sitecore_experience_platform/digital_marketing/the_list_manager/creating_lists/add_a_contact_to_a_list，其中包含正在使用的代码。

感谢您解决此问题的任何帮助

Answer 1

我猜它可能会滞后。

您应该使用 GSAP 等库（在本例中使用ScrollTo插件）以获得更好的性能。众所周知，jQuery具有糟糕的动画性能，并且动画滚动位置可能特别昂贵。

Answer 2

如果有人提出这个问题而想知道我是如何设法让它工作的，那么最终的脚本就在下面。我使用GSAP插件ScrollToPlugin制作了gcampbell建议

$(function () {
    $('a[href*="#"]').click(function () {
        if(this.hash != "") {
            TweenLite.to(window, 1.5, {scrollTo:{y:$(this.hash).position().top, autoKill:true}, ease: Power2.easeInOut});
        } else {
            TweenLite.to(window, 1.5, {scrollTo:{y:0}, ease: Power2.easeInOut});
        }
        return false;
    });
});

平滑滚动在所有设备上的性能不是恒定的

2 个答案: