使用javascript平滑自动滚动

使用javascript平滑自动滚动,javascript,jquery,autoscroll,Javascript,Jquery,Autoscroll,我正在尝试在我的网页上实现一些代码,以便在加载页面后自动滚动。我使用了一个Javascript函数来执行自动滚动,当页面加载时我调用了我的函数,但是页面仍然不能平滑滚动!有没有办法自动平滑地滚动我的页面 下面是我的Javascript函数: function pageScroll() { window.scrollBy(0,50); // horizontal and vertical scroll increments scrolldelay = setTime

我正在尝试在我的网页上实现一些代码,以便在加载页面后自动滚动。我使用了一个Javascript函数来执行自动滚动,当页面加载时我调用了我的函数,但是页面仍然不能平滑滚动!有没有办法自动平滑地滚动我的页面

下面是我的Javascript函数:

function pageScroll() {
        window.scrollBy(0,50); // horizontal and vertical scroll increments
        scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}

您可能需要查看该插件的源代码,它可以平滑地滚动。或者甚至可以只使用插件而不是滚动自己的函数。

既然您已将问题标记为“jquery”,为什么不尝试类似于
.animate()
?这个特殊的jquery函数设计用于平滑地设置各种属性的动画,包括数字CSS属性以及滚动位置。

尝试使用jquery,以下代码:

$(document).ready(function(){
     $('body,html').animate({scrollTop: 156}, 800); 
});
156-从页面顶部滚动至(px)位置。

800-滚动持续时间(ms)

这不是平滑的,因为滚动每100毫秒增加50次

将此值和滚动的数量更改为较小的数字,使函数运行时产生更“平滑”的错觉

降低速度量,使其更快或更慢

function pageScroll() {
    window.scrollBy(0,1);
    scrolldelay = setTimeout(pageScroll,10);
}

将看起来更平滑,请尝试;)

顺利运行动画取决于客户端计算机。无论您如何公平地编写代码,您永远不会满足于在128 MB Ram系统上运行动画的方式

以下是如何使用jQuery滚动:

$(document).scrollTop("50");

您可能还想试试。

您可以使用
jfunc
函数来执行此操作。 使用
jFunc\u ScrollPageDown
jFunc\u ScrollPageUp
功能。
.

数字是硬编码的,但我们的想法是逐项移动(页眉为52px),当页眉向下时,返回

let elem = document.querySelector(".spfxBirthdaysSpSearch_c7d8290b ");
let lastScrollValue = 0
let double_lastScrollValue = 0
let scrollOptions = { top: 79, left: 0, behavior: 'smooth' }
let l = console.log.bind(console)

let intScroll = window.setInterval(function() {
    double_lastScrollValue = lastScrollValue //last
    lastScrollValue = elem.scrollTop // after a scroll, this is current
    if (double_lastScrollValue > 0 && double_lastScrollValue == lastScrollValue){
        elem.scrollBy({ top: elem.scrollHeight * -1, left: 0, behavior: 'smooth' });
    } else {
        if (elem.scrollTop == 0){
            elem.scrollBy({ top: 52, left: 0, behavior: 'smooth' });
        } else {
            elem.scrollBy(scrollOptions);
        }
    }
}, 1000);

只是一个更正,800是动画的持续时间,而不是速度。你能告诉我这段代码中的方法吗?这样当用户使用鼠标滚动时,我就可以停止自动滚动。如果这是正确的答案,那么一定要这样标记;)另外,这需要另一个使用jquery最容易完成的函数,并将其作为事件进行检查。我建议不要将字符串传递给
setTimeout
,因为这相当于调用
eval('pageScroll')
使用类似
setTimeout(function(){//coolcodehere},10)
将函数传递给setTimeout,而不是string@johnnyutah后者是目标。很抱歉,这似乎是我的错别字。scrollBy支持一个“行为”命令,可以将滚动设置为
smooth
auto
:也许他的意思是解决方案可以用jQuery或纯JS编写。