Question

我正在尝试在我的网页上实现一些代码，以便在加载页面后自动滚动。我使用Javascript函数执行自动滚动，并在页面加载时调用了我的函数，但页面仍然没有顺利滚动！有没有办法顺利自动滚动页面？

这是我的Javascript函数：

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

Answer 1

它不顺畅，因为你的滚动每100毫秒增加50个。

将此值和您滚动的数量更改为较小的数字，以使该功能运行时具有更加“流畅”的错觉。

调低速度以使其更快或更慢。

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

看起来会更顺畅，试试吧;）

Answer 2

尝试使用jQuery，以及此代码：

$(document).ready(function(){
     $('body,html').animate({scrollTop: 156}, 800); 
});

156 - 位置从页面顶部滚动到（px）。
800 - 滚动持续时间（毫秒）

Answer 3

您可能希望查看jQuery ScrollTo插件的源代码，该插件可以顺畅滚动。或者甚至可以使用插件而不是滚动自己的功能。

Answer 4

平滑运行动画取决于客户端计算机。无论你的编码多么公平，你都不会满足于动画在128 MB Ram系统上的运行方式。

以下是使用jQuery滚动的方法：

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

您可能还想试用AutoScroll Plugin。

Answer 5

您可以使用jfunc功能执行此操作。使用jFunc_ScrollPageDown和jFunc_ScrollPageUp功能。 http://jfunc.com/jFunc-Functions.aspx

Answer 6

由于您已将问题标记为“jquery”，为什么不尝试使用.animate()之类的内容？这个特殊的jquery函数旨在平滑地动画各种属性，包括数字CSS属性以及滚动位置。

Answer 7

数字是硬编码的，但想法是逐项移动（标题为 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);

使用javascript平滑自动滚动

7 个答案: