使用scrollTop滚动到下一个和上一个div，我该如何完成? [英] Scroll to next and previous div using scrollTop, how do I accomplish this?

问题描述

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

I'm currently designing a mobile-first survey website and I can't quite figure out how to scroll the the next and previous div using jQuery. Every div is supposed to be a question for the survey and by clicking on the button class="next" inside every div the page should scroll to the next div. You can find my progress so far in this fiddle

http://jsfiddle.net/Da3qp/.

由于某些原因，在.container

到目前为止，这是我的jQuery:

This is my jQuery so far:

(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>

推荐答案

我在您的代码中修复了一些要解决的问题.

I fixed few things in your code to fix it.

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

这篇关于使用scrollTop滚动到下一个和上一个div，我该如何完成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！