javascript - html/js中没有点击功能的滚动页面 Action

Question

我使用此代码在单击按钮后滚动页面:

$(document).ready(function() {
  $("#button").click(function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: $($.attr(this, 'href')).offset().top
    }, 8000);
  });
});

但我想让它在不单击任何按钮的情况下工作。当页面加载时，它应该滚动。我使用了这段代码，但它不起作用:

$(document).ready(function() {
  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 8000);
});

Answer 1

我个人不太喜欢使用 jQuery 的 animate 函数，所以我实现了自己的。您可以通过增加或减少 setTimeout 函数的时间来改变它的速度。

$(document).ready(function() {
    var pixels = $('a').position();
    Scroll(pixels.top);
});

function Scroll(pixels) {
    if( pixels > 0){
        window.scrollBy(0,1);
        scrollTimeout = setTimeout(function(){
            Scroll(pixels-1); 
        },1);
    }
    else {
        clearTimeout(scrollTimeout)
        return;
    }
}

这是我制作的 fiddle 链接，用于演示我认为您正在尝试做的事情。 如果这有帮助请告诉我!

https://jsfiddle.net/ogb4t33q/