使用动画 div 自动滚动网页答案

【问题标题】：Automatically Scrolling a webpage with animating div使用动画 div 自动滚动网页
【发布时间】：2015-05-05 16:02:51
【问题描述】：

我正在制作一个网络应用程序。我创建了 25 个 div。

我使用过 jquery fadeIn()，通过它逐渐制作 div 并在屏幕上一个接一个地显示。

但问题是，当创建了 25 个 div 时，会创建滚动，因此可以看到前 4 个 div，但直到用户滚动页面才能看到其余的 div。

我希望在创建一个一个的 div 时，页面应该自动滚动到最近创建的 div 等等，这个过程应该一直持续到最后一个 div 被创建。

【问题讨论】：

这对于正在使用该网站的用户来说会非常烦人。或者你正在制作一个像 twitter feed 一样自动滚动的侧边栏？
实际上这个网页不会显示数学问题的解决方案。问题的步骤在div中解决。所以很明显，一步一步地解决很多 div 将在页面下方制作。我想自动滚动它们。

标签： javascript jquery html css

【解决方案1】：

你可以使用

$('html,body').scrollTop($(".answer.visible:last").offset().top);

$(function() {
  $(".answer").hide();
  $('#demo').click(function(e) {
    var _div = $('.answer[style*="display: none"]:first');
    if (_div.length) {
      _div.fadeIn();
      $('html,body').animate({
          scrollTop: _div.offset().top
        },
        'slow');
    } else {
      $(this).text('Done..!');
    }

  });
});

#demo {
  position: fixed;
  bottom: 0px;
  left: 0px;
}
.answer {
  width: 100%;
  height: 200px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Click here</button>
<div class="answer">1</div>
<div class="answer">2</div>
<div class="answer">3</div>
<div class="answer">4</div>
<div class="answer">5</div>
<div class="answer">6</div>
<div class="answer">7</div>
<div class="answer">8</div>
<div class="answer">9</div>
<div class="answer">10</div>
<div class="answer">11</div>
<div class="answer">12</div>
<div class="answer">13</div>
<div class="answer">14</div>
<div class="answer">15</div>
<div class="answer">16</div>
<div class="answer">17</div>
<div class="answer">18</div>
<div class="answer">19</div>
<div class="answer">20</div>
<div class="answer">21</div>
<div class="answer">22</div>
<div class="answer">23</div>
<div class="answer">24</div>
<div class="answer">25</div>

我认为当我们使用 slideDown+scrollTop 时这看起来很酷。 Check fiddle

文档

获取坐标 http://api.jquery.com/offset/

设置滚动条的垂直位置 https://api.jquery.com/scrollTop/

设置滚动条的水平位置 https://api.jquery.com/scrollleft/

【讨论】：

在我的 Firefox v 37 中完美运行。单击按钮查看动画。
现在它可以工作了，你改变了它，使所有的 div 都已经在 DOM 中，也许这就是问题所在。
如果要横向移动呢？
@Zeshan_SE api.jquery.com/scrollleft 设置滚动条位置。 _div.offset().left 获取坐标。

【解决方案2】：

我在这里找到了这个链接 smooth auto scroll by using javascript 使用它你可以在这里创建类似这样的东西： http://jsfiddle.net/mrc0sp5j/

重点是，您使用

创建滚动功能

window.scrollBy or window.scrollTo

http://www.w3schools.com/jsref/met_win_scrollto.asp 使用 jQuery .last 或 .eq 您可以指定要滚动到的元素

$(".mydivobjects").eq(x).position().top

希望这会有所帮助干杯

【讨论】：

好的，如果我们想用一个按钮来控制它，那么应该有什么代码？
您可以将滚动功能（参见小提琴）打包在一个按钮中，例如 $("#button").click(function() { scrolltofunction(); }));