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
For some reason the class .current
is added on every div inside the .container
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());
}
});
})();
Followed by my CSS
.back {
position:fixed;
z-index:1000;
}
.question-container {
height:100%;
padding:2em;
background-color:blue;
margin-top:20px;
}
.current {
color:red;
}
And 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.
Demo: 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);
}
});
})();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.