如何在JQuery中滚动元素

How can I scroll through elements in JQuery?

本文关键字：滚动 元素 JQuery      更新时间：2023-09-26

粗略地说，我试图制作一系列按钮a、B、d，点击a可以滚动到B、点击B可以滚动到C等，点击d可以滚动到a。

我有一些按钮（"标签"），它们都有类tag和一个特定的标签，比如green。我正在努力做到点击一个名为"绿色"的标签，就会进入下一个"绿色"，除非它是最后一个，在这种情况下，它会重新开始。

以下是我一直在尝试的：

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

这基本上是有效的，但前提是你必须从头开始。我正试图让它点击第二个"绿色"标签，它会把你带到第三个，等等

我知道我让这件事变得不必要的复杂。有没有更简单的方法？

您可以使用此代码查找当前元素的索引：

    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;
    }
相关文章：