例如,我试图使一个滚动按钮,可以向下滚动多个div。
这是我的意思的一些示例代码。

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>

我知道如何使按钮滚动,也只是一个div,但我不知道如何使按钮首先滚动到1,然后2,然后3等。
这是按钮的代码
<section id="scrolldownButton" class="button">
            <a href=""><span></span>Scroll</a>
</section>

$(function() {
           $('a[href*=#]').on('click', function(e) {
               e.preventDefault();
                   $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
                        });
                });

试试看:
$(function() {
  $('a[href*=#]').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top
    }, 500, 'linear');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>

<section id="scrolldownButton" class="button">
  <a href=""><span></span>Scroll</a>
</section>

最佳答案

要实现这一点,您可以在当前active元素上设置一个类,然后使用next()查找要在下次单击按钮时滚动到的元素。一旦到达要滚动的元素的末尾,就可以返回到开头。注意,我在content元素中添加了一个公共的div类,使其更加可靠。试试这个:

$(function() {
  $('a[href*="#"]').on('click', function(e) {
    e.preventDefault();
    var $target = $('.content.active').next('.content');
    if ($target.length == 0)
      $target = $('.content:first');

    $('.active').removeClass('active');
    $target.addClass('active');

    $('html, body').animate({
      scrollTop: $target.offset().top
    }, 500, 'linear');
  });
});

.content {
  height: 250px;
}

#scrolldownButton {
  position: fixed;
  top: 20px;
  right: 50px;
}

.active {
  background-color: #EEE;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="content active">1</div>
<div id="2" class="content">2</div>
<div id="3" class="content">3</div>
<div id="4" class="content">4</div>
<div id="5" class="content">5</div>

<section id="scrolldownButton" class="button">
  <a href="#">Scroll</a>
</section>

07-24 09:50
查看更多