代码之家 › 专栏 › 技术社区 › Albeld

Autoscroll网站始终保持相同的速度

autoscroll scroll algorithm jquery javascript

Albeld · 技术社区 · 7 年前

现在我正在使用以下代码:

function scroll(element, speed) {
    element.animate({ scrollTop: $(document).height() }, speed,'linear', function() {
        $(this).animate({ scrollTop: 0 }, speed, scroll(element, speed));
    });
}

scroll($('#start, #end'), 300000);

但滚动速度会发生变化,例如,当我从移动或其他设备观看时,因为响应性设计导致内容变长或变短。

我需要一个非常简单的“滚动到底部(带id或类)”脚本,但没有像开始变快然后在最后变慢这样的动画,只要在有人进入网站时从一开始就以恒定速度滚动即可。

提前谢谢。

1 回复 | 直到 7 年前

Lece 7 年前

为了保持恒定的速度,我们可以简单地使用可靠的 time = distance / speed 方程式

下面是一个示例:

function scroll(element, speed) {
    var distance = element.height();
    var duration = distance / speed;
    element.animate({scrollTop: distance}, duration, 'linear');
}

$(document).ready(function() {
    $("button").click(function() {
        scroll($("html, body"), 0.1); // Set as required
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<button>Scroll</button>
<div id="content">

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue in risus eget luctus. Integer lacinia cursus ullamcorper.
    In venenatis hendrerit massa, tempor dictum ligula feugiat id. Sed est nulla, fringilla a eleifend et, efficitur
    sit amet nisl. Maecenas a tempor nisl. Donec feugiat dictum orci sed dapibus. Mauris nec felis at nisl commodo gravida
    at nec arcu. Praesent nibh nisi, pharetra blandit cursus auctor, pretium eget turpis. Donec quis tempus nisi. Aliquam
    volutpat dolor magna, id sodales tortor viverra a. Fusce nulla quam, congue in malesuada non, hendrerit eu magna.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam vel tristique tortor,
    auctor mollis neque.
</p>
<p>
    Proin scelerisque sodales nisl, vel commodo lorem consectetur vel. Ut eget orci tortor. Integer at tellus blandit, vulputate
    sapien nec, scelerisque orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ipsum leo, luctus
    et tristique in, gravida ac turpis. Donec imperdiet viverra commodo. Mauris rhoncus sit amet neque eget ultricies.
    Sed lectus diam, mollis commodo iaculis eget, maximus ac ante. Mauris posuere ornare leo, vitae scelerisque sem scelerisque
    vitae. Aliquam tempor ligula non molestie interdum. Donec eleifend quam ac augue accumsan interdum. Curabitur nisi
    tellus, euismod a arcu ut, ultricies varius mauris. Nullam id nibh sem. Aliquam nec libero sit amet dolor auctor
    suscipit.
</p>
<p>
    Aliquam congue maximus magna. In eu nisi at dolor dignissim mattis. Aliquam sagittis cursus leo ut eleifend. Curabitur sed
    fermentum neque, accumsan accumsan eros. Morbi aliquet augue eu auctor bibendum. Ut ac porta justo. Donec feugiat,
    urna in semper mollis, risus quam facilisis felis, in feugiat nisi risus at urna. Proin dapibus ex sem, nec vehicula
    velit interdum iaculis. Donec molestie bibendum ante, nec cursus urna luctus sit amet. Phasellus lobortis sem eget
    arcu congue placerat. Donec at efficitur tortor, vel interdum dolor. Phasellus sodales sapien ipsum.
</p>
<p>
    Mauris ut leo erat. Integer convallis ligula lectus, sit amet accumsan orci imperdiet tristique. Duis faucibus dignissim
    tempus. Phasellus bibendum mollis auctor. Etiam et quam consectetur, accumsan nisi vel, varius dui. Vivamus tempor
    eleifend euismod. In vulputate, dui et vestibulum faucibus, felis enim eleifend est, non volutpat ante nulla eget
    ante. Nam porttitor quam non molestie sodales. Duis mi tellus, varius eu viverra non, consectetur eget arcu. Phasellus
    nec urna vitae dui scelerisque porttitor suscipit sed diam. Nam in nisi sapien. Nam luctus ac odio vitae sodales.
    Integer elementum est eget consequat vehicula. Aliquam elementum et massa vel elementum. Mauris imperdiet sem at
    ipsum fermentum, sit amet tempus tortor venenatis. In accumsan ipsum semper, euismod elit eu, luctus massa.
</p>
<p>
    Aenean sit amet vehicula odio, non placerat tortor. Morbi hendrerit lacus non sapien luctus, ac tempor libero dictum. Vestibulum
    tempus vestibulum dolor non congue. Nulla facilisi. Vivamus non consequat tellus. Cras accumsan finibus felis non
    auctor. Morbi volutpat, magna in porttitor malesuada, felis tellus pellentesque tortor, id imperdiet tellus odio
    et diam. Ut faucibus ut massa sed blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
    ante arcu, blandit non aliquet ut, consectetur sed orci. Fusce luctus convallis consectetur. Vivamus mattis bibendum
    mi, sit amet euismod libero fermentum nec. Sed venenatis erat sem, nec dictum turpis venenatis sed. Morbi tristique
    condimentum leo non tempus. Pellentesque sed tortor et ipsum volutpat dapibus et eu quam.
</p>
</div>

跑整页并调整滚动之间的窗口高度以查看效果。