CODEWITHSUNDEEP
jquery
simple
simple

Reputation: 2397

Scroll to next class

How do I make this scroll to the next class?

var $root = $('html, body');
$('a.scroll-to-next-nav').click(function(){
    $root.animate({
        scrollTop: $( $(this).closest('.header-icons').nextAll('.header-icons') ).offset().top
    }, 500);
    return false;
});

<div class="header-icons"><a href="#" class="scroll-to-next-nav" title="Go to next section">Go to next section</a></div>


<div class="header-icons"><a href="#" class="scroll-to-next-nav" title="Go to next section">Go to next section</a></div>
<div class="header-icons"><a href="#" class="scroll-to-next-nav" title="Go to next section">Go to next section</a></div>

Upvotes: 0

Views: 1155

Answers (2)

Ol Sen
Ol Sen

Reputation: 3348

hope this helps! :)

var $root = $('html, body');
var i=$('a.next').length, v=1;
$('a.next').click(function(){
    var to = v<i ? $(this).closest('.page').next('.page').offset().top : 0;
    $root.animate({
        scrollTop: to
    }, 500);
    if(v<i) {v++;} else {v=1;}
    return false;
});

Upvotes: 0

Jozeidon
Jozeidon

Reputation: 33

Try with this:

scrollTop: $(this).closest('.header-icons').next('.header-icons').offset().top

You want to go to the next div (next()), not nextAll()

Upvotes: 1

Related Questions