如何在JQuery中滚动浏览元素？

Question

Roughly, I'd trying to make a series of buttons ABCD, where clicking on A scrolls you to B, clicking on B scrolls you to C, etc, and clicking on D scrolls you to A.

I have buttons ("tags") that all have the class tag and a specific tag, like green . I'm trying to make it so that clicking on a tag called "green" takes you to the next "green," unless it's the last one, in which case it starts over.

Here's what I've been trying:

$(document).ready(function(){
    counter = 0
    $('.tag').click(function(){
        counter = counter + 1; 
        var scrollTo = '.' + $(this).text(); 
        scrollTo = $(scrollTo)      
        console.debug(scrollTo);
        len = scrollTo.length
        if ( counter > len-1 ) { 
            counter = 0; 
            scrollTo = $(scrollTo)[0]; 
        } else { 
            scrollTo = $(scrollTo)[counter]
        } 
        console.debug(scrollTo);
        $('html, body').animate({ scrollTop: $(scrollTo).parent().offset().top });
    }); 
}); 

This mostly works, but only if you start at the beginning. I'm trying to make it so that clicking on the 2nd "green" tag, it takes you to the 3rd, etc.

I know I'm making this unnecessarily convoluted. Is there an easier way?

Answer 1

You can use this code to find index of current element:

    var counter = 0; 
    var scrollToSelector = '.' + $(this).text(); 
    var scrollTo = $(scrollToSelector);
    var self = this;
    scrollTo.each(function(i, e){
        if (e == self) {
            counter = i + 1;
        }
    });
    if (counter >= scrollTo.length) {
        counter = 0;
    }