滚动到按钮单击的类 - HTML

Question

我有一个HTML页面，其框架有很多行和一个按钮“下一步”。单击“下一步”按钮，我应该可以导航到具有橙色的段落。所有橙色的段落都属于同一类。

这意味着，在页面加载时，我应该能够导航到第3段。在另一次点击我应该去第6段，依此类推..

我尝试使用document.getelementsbyclassname（）。但是我无法编写逻辑来导航到该特定位置。请帮帮我。

Answer 1

你可以这样做，

正在使用 DEMO

$("p:first").addClass("active");

$(document).on("click","#ip",function(){
    if($("p.orange:last").hasClass("active")){

           var topVal = $("p:first").offset().top;

           $("html body").animate({
                scrollTop:topVal
            },500,function(){
                $("p").removeClass("active");
                $("p:first").addClass("active");
            });
       }
    else{
        var nextElem = $("p.active").nextAll("p.orange:first");

        var topVal = nextElem.offset().top;
        //alert(topVal);
        $("html body").animate({
            scrollTop:topVal
        },500,function(){
            $("p").removeClass("active");
            nextElem.addClass("active");
        });
   }
});

Answer 2

你可以试试这个。首先，创建一个名为的变量，例如数字，它存储我们当前需要滚动到哪个段落。如1st，2nd等。当页面加载时，它的值将 1 。

var number=1;

下一步是将ids添加到所有橙色段落中。第一段获取ID orange1 ，第二段获取ID orange2 ，依此类推。您可以手动执行此操作，或者如果段落太多，您可以尝试通过循环或类似的方式添加它。

现在假设下一步按钮有一个名为“按钮”的ID，您可以添加以下代码：

$('#button').click(function() {
    $('html, body').animate({
        scrollTop: $('#orange'+number).offset().top
    }, 1000);

    number++;
});

现在，只要您点击下一步按钮，该页面就会滚动到正确的段落。希望这会有所帮助。