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的动画功能，所以我实现了自己的功能。您可以通过增加或减少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;
    }
}

这是我用来演示我认为你想要做的事情的小提琴的链接。如果这有帮助，请告诉我！

https://jsfiddle.net/ogb4t33q/

Answer 2

在这个块中：

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

this将参考文档。这在您的函数的其他版本中没问题，因为this引用了带有<a>的{{1}}元素。这允许href找到一个元素并完成滚动的逻辑。

您需要准确定义要滚动的元素，如下所示：

＆＃13;

$($.attr(this, 'href'))

＆＃13;

$(document).ready(function() {
  $('html, body').animate({
    scrollTop: $('#scrollToThisEl').offset().top
  }, 3000);
});

＆＃13;

或使用window.location.hash阅读网址中的<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div style="height:3000px;background:repeating-linear-gradient(0deg,#606dbc,#606dbc 50px,#465298 50px,#465298 100px);"></div> <div id="scrollToThisEl">Scroll here</div> <div style="height:3000px;"></div>值。

#...

在html / js中滚动没有单击功能的页面操作

2 个答案: