Javascript 使用scrollTop滚动到下一个和上一个div，如何实现这一点？

我目前正在设计一个mobile first调查网站，我不知道如何使用

jQuery

滚动下一个和上一个

div

。每个

div

都应该是调查的问题，通过单击每个

div

内的

按钮class=“next”

，页面应该滚动到下一个div。 你可以在这张

小提琴上找到我迄今为止的进步


由于某些原因，类
.current
被添加到
.container

这是迄今为止我的jQuery：

(function() {
    var scrollTo = function(element) {
        $('html, body').animate({
            scrollTop: element.offset().top
        }, 500);
    }
    $('#next').click(function(event) {
        event.preventDefault();
        var $current = $('#container > .current');
        if ($current.index() != $('#container > div').length - 1) {
            $current.removeClass('current').next().addClass('current');
            scrollTo($current.next());
        }
    });
    $('#prev').click(function(event) {
        event.preventDefault();
        var $current = $('#container > .current');
        if (!$current.index() == 0) {
            $current.removeClass('current').prev().addClass('current');
            scrollTo($current.prev());
        }
    });
})();

然后是我的CSS

.back {
    position:fixed;
    z-index:1000;
}

.question-container {
  height:100%;
  padding:2em;
  background-color:blue;
  margin-top:20px;
}


.current {
    color:red;
}

和HTML

<div class="back">
      <button class="back" id="back">Back</button>
</div>

<div id="container">
<div class="question-container current">
     <h2>Question 1</h2>
     <button class="next"> Next   
     </button>
 </div>

<div class="question-container">
     <h2>Question 2</h2>
     <button class="next"> Next   
     </button>
 </div>

<div class="question-container">
     <h2>Question 3</h2>
     <button class="next"> Next   
     </button>
 </div>

<div class="question-container">
     <h2>Question 4</h2>
     <button class="next"> Next   
     </button>
 </div>

<div class="question-container">
     <h2>Question 5</h2>
     <button class="next"> Next   
     </button>
 </div>
</div>


返回
问题1
下一个
问题2
下一个
问题3
下一个
问题4
下一个
问题5
下一个
我在您的代码中修复了一些东西来修复它

演示：

.next（）选择所有同级。试试这个，你的JSFIDLE只工作一次，然后点击按钮什么也不做。后退不能正常工作，但下一步可以工作，我很乐意！但我是新来的，它说你需要更多的声誉来提高投票率。很抱歉
(function() {
    var scrollTo = function(element) {
        console.log(element);
        $('html, body').animate({
            scrollTop: element.offset().top
        }, 500);
    }

    $('.next').click(function(event) {
        event.preventDefault();
        var $current = $('#container > .question-container.current');
        var $next = $current.next().first();
        if ($next.length!=0) {
            $current.removeClass('current')
            $next.addClass('current');
            scrollTo($next);
        }
    });
    //don't use $('.back') since there are two and the event will be triggered twice
    $('#back').click(function(event) {
        event.preventDefault();
        var $current = $('#container > .question-container.current');
        var $prev = $current.prev().first();
        if ($prev.length!=0) {
            $current.removeClass('current')
            $prev.addClass('current');
            scrollTo($prev);
        }
    });
})();