javascript - 使用 scrollTop 滚动到下一个和上一个 div，我该怎么做？

Question

我目前正在设计一个移动设备优先的调查网站，我不太清楚如何使用 jQuery 滚动下一个和上一个 div。每个 div 都应该是调查的一个问题，点击每个 div 内的 button class="next" 页面应该滚动到下一个分区。您可以在此 fiddle

中找到我目前的进度

http://jsfiddle.net/Da3qp/ .

出于某种原因，类 .current 被添加到 .container 中的每个 div 上

到目前为止，这是我的 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>

Answer 1

我在你的代码中修复了一些东西来修复它。

演示: http://jsfiddle.net/aamir/Da3qp/4/

(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);
        }
    });
})();