Question

下一个问题是：我有6个div，高度为700px，一个固定按钮。

< a class="button >< /a>

< div class="div1" >< /div >
...
< div class="div6 " > < /div >.

，并且每次用户单击该固定按钮时，我都希望向下滚动到下一个div，依此类推。像旋转木马（但垂直）。

例如用户只看到div1，然后按下按钮，它会自动滚动到div2。然后他再次单击该按钮，然后将其向下滚动到div3，依此类推，效果还算平滑。

这是我所做的，但只能运行一次：

$(".button").click(function() {
$('html,body').animate({
    scrollTop: $(".div1").offset().top},
    'slow');
});

我知道该怎么做，但是有6个不同的按钮，是的，这不是最好的主意。

Answer 1

尝试一下

JS

var count = 0,
    sections = $('.section'),
    scrollTo = function(index){
      $('html, body').animate({
        scrollTop: sections.eq(index).offset().top
      }, 'slow');
    };


$(".next").click(function(){
  count++;  
  scrollTo(count);
});

$(".prev").click(function(){
  count--;  
  scrollTo(count);
});

CSS

.navigation { 
  position: fixed;
  right: 20px;
  top: 20px;
}

.button {
  display: block;
  margin-bottom: 10px;
}

.section {
  border-bottom: 2px solid #000;
  font-size: 100px;
  height: 700px;
  line-height: 700px;
  text-align: center;
}

HTML

<div class="navigation">
  <button class="next">Next</button>
  <button class="prev">Prev</button>
</div>

<div class="sections">
  <div class="section">1</div>
  <div class="section">2</div>
  <div class="section">3</div>
  <div class="section">4</div>
  <div class="section">5</div>
</div>

DEMO

一个滚动按钮，滚动到jQuery中的多个元素

1 个答案: