Javascript页面自动上下滚动答案

【问题标题】：Javascript page scrolls automatically up and downJavascript页面自动上下滚动
【发布时间】：2021-05-20 23:22:28
【问题描述】：

我正在努力应对一项超出我技能范围的挑战。我正在尝试在无限循环中上下滚动页面（非常缓慢）。我让代码循环一次，但我的挑战是让它一遍又一遍地循环。我希望得到建议。

do {
$(document).ready(function(){
     $('body,html').animate({scrollTop: 2650}, 57820);
  
});

$(document).ready(function(){
     $('body,html').animate({scrollTop: 0}, 35000);
  
});
}
while (true === true);

【问题讨论】：

这是一个很好的尝试，但您可能已经注意到，如果您尝试运行此代码，它会锁定您的浏览器。这就是整个无限循环的过程。因此，与其使用do...while 循环，不如考虑使用间隔计时器。你可以了解更多关于HERE
它确实锁定了我的浏览器。是的，我想我曾经听说过无限循环会导致问题。我要研究那个链接。谢谢！
我点击了您提供的链接，它帮助很大。不幸的是，然后我遇到了另一个问题，但是另一个用户提供的代码解决了它。感谢您提供此链接，因为即使我的代码并不完美，它仍然有效，而且我是编写它的人。让我觉得我正在打球。
好消息！乐意效劳。坚持下去——只需要练习。玩得开心。

标签： javascript loops scroll infinite-loop infinite-scroll

【解决方案1】：

Javascript代码主要是asynchronous。这对您来说意味着浏览器正在快速运行“转到顶部”和“转到底部”代码。从而使您的浏览器崩溃。你想要的是等到滚动到底部完成，然后滚动到顶部。这是一个可以满足您需求的示例。

// Getting a reference to html. The way you did it in the loop
// is slow because it has to get access to it every time.
const main = $('html');

// The scrollTop function
// scrolls to the top
function scrollTop() {
    console.log('scrolling to top')
    main.animate({scrollTop: 0},1000,"linear",scrollBottom /* this is a callback it means when we are done scrolling to the top, scroll to the bottom */)
}

function scrollBottom() {
    console.log('scrolling to bottom')
    main.animate({scrollTop: document.body.offsetHeight},1000,"linear",scrollTop /* this is a callback it means when we are done scrolling to the bottom, scroll to the top */)
}

// this kicks it off
// again only running $(document).ready once to increase performance.
// Once scrollTop completes, it calls scrollBottom, which in turn calls scrollTop and so on
$(document).ready(scrollTop);

【讨论】：

这很棒！实际上，这非常简单。我很欣赏你的代码如此干净。我才刚刚开始学习 javascript，我已经掌握了基本的想法，但是将语言应用到像这样的特定事情上仍然超出了我的能力范围。我可以从你写的东西中学习
如果您认为我的回答解决了问题，您能接受吗？谢谢！
刚刚做到了！对不起，我是新人。我没有意识到接受答案是什么，或者勾选标记是接受的方式。非常感谢您的帮助！

【解决方案2】：

Javascript 不会等到一个函数完成，所以你不能创建这样的循环。但是您可以利用 jquery.animate 完整的功能：

$(document).ready(scrollDown()); //run function first time

function scrollUp() {
 $('body,html').animate({
   scrollTop: 0
 }, 35000, "linear", 
   scrollDown//we are on the top, let's go down 
 );
 return false;
}

function scrollDown() {
 $('body,html').animate({
   scrollTop: $(document).height()
 }, 57820, "linear",
   scrollUp//scrolling down is completed, let's go up
  );
}

这是此代码的工作示例：https://jsfiddle.net/y7fguk52/

【讨论】：

感谢您的回复！