自动滚动到页面底部然后顶部并重复

【问题标题】：Autoscroll to bottom of page then top and repeat自动滚动到页面底部然后顶部并重复
【发布时间】：2012-09-18 13:09:01
【问题描述】：

我创建了一个显示所有行的仪表板，但我想要一个自动滚动，它会慢慢向下滚动页面底部，然后慢慢滚动回顶部并重复。我已经用谷歌搜索了这个并且无法获得工作代码。我一直在寻找 jQuery 代码，但什么都可以。

因为页面会一直调整它不能有固定高度的滚动。

不确定您是否需要更多信息，但如果需要，我会更新此问题。

问候 开局

【问题讨论】：

  • 向我们展示您已经尝试过的代码。
  • 很好，只是尝试自动滚动到页面底部，但没有奏效。功能 pageScroll() { window.scrollBy(0,1); scrolldelay = setTimeout('pageScroll()',10); }
  • 下面看我的回答，使用 animate 函数的回调可以让你有两个方法来回调用，所以它反复上下滚动。

标签： jquery autoscroll


【解决方案1】：

你可以使用这样的东西。

//run instantly and then goes after (setTimeout interval)

    $("html, body").animate({ scrollTop: $(document).height() }, 4000);
    setTimeout(function() {
       $('html, body').animate({scrollTop:0}, 4000); 
    },4000);
  var scrolltopbottom =  setInterval(function(){
         // 4000 - it will take 4 secound in total from the top of the page to the bottom
    $("html, body").animate({ scrollTop: $(document).height() }, 4000);
    setTimeout(function() {
       $('html, body').animate({scrollTop:0}, 4000); 
    },4000);

    },8000);

​//Use this to stop the scroller -> clearInterval(scrolltopbottom);

示例： http://jsfiddle.net/NaP8D/11/

【讨论】：

  • 这行得通，但是当它向下滚动时如何降低速度？
  • @TheGambit 如果我理解正确，您需要在动画方法中使用缓动。您需要将其从线性更改为其他内容。包括 jquery ui 以获得一些替代方案：jqueryui.com/demos/effect/easing.html
  • 编辑看我的更新帖。只需将“4000”值增加或减少到您想要的任何速度和间隔。
  • 非常感谢。你能评论一下这 4000 个数字中的每一个代表什么吗？
  • 用解释再次更新了我的帖子。享受！ :)
【解决方案2】：

你应该试试这个以获得更好的结果

//run instantly and then goes after (setTimeout interval)

$("html, body").animate({ scrollTop: $(document).height() }, 4000);

setTimeout(function() {
   $('html, body').animate({scrollTop:0}, 4000); 
},4000);


setInterval(function(){
     // 4000 - it will take 4 secound in total from the top of the page to the bottom
$("html, body").animate({ scrollTop: $(document).height() }, 4000);
setTimeout(function() {
   $('html, body').animate({scrollTop:0}, 4000); 
},4000);
    
},8000);


$('html, body').mouseover(function(e) {
$(this).stop(true);
      
    }).mouseout(function() {
         $(this).stop(false);
    });
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="height:2000px; float:left; width:100%;">
Text text
Text text
    Text text
    
    Text text
    Text text
    Text text
    Text text
    
    
    
    Text text
    Text textv
    Text text
    Text text
    
    Text text
    Text textText text
     Text textText text Text textText text
      Text textText text Text textText text Text textText text Text textText text Text textText text
       <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p>Text textText text
     <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p>
        <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p>
    

</div>

http://jsfiddle.net/neelu/gvvnd0tt/8/

【讨论】：

    【解决方案3】：

    这里，这应该很好用，只需将 5000 更改为以毫秒为单位的时间即可调整速度。

    http://jsfiddle.net/BDc6S/3/

    function scrollDown(el) {
    el.animate({
        scrollTop: el[0].scrollHeight
    }, 5000, function() {
        scrollUp(el)
    });
};

function scrollUp(el) {
    el.animate({
        scrollTop: 0
    }, 5000, function() {
        scrollDown(el);
    });
};

scrollDown($("html,body"));​

    【讨论】：

    • 每个循环的停止和开始滚动之间的暂停似乎都会增加。
    【解决方案4】： 
    function doSomething() {
  $(document).scrollTop($(document).height());
}
setInterval(doSomething, 5000);

    这将每 5 秒滚动到页面底部。如果您有像 facebook 这样基于用户滚动的自动加载内容，这将很有用。

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2012-04-29
      • 2012-07-27
      • 1970-01-01
      • 2020-03-25
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode