单击按钮滚动到一个类-HTML

Question

I have a HTML page with a frame having lot of lines and a button "Next". On clicking Next Button, I should be able to navigate to a paragraph having orange color. All the paragraphs having orange color will be of same class.

That means, on page load I should be able to navigate to 3rd paragraph. On another click I should go to 6th paragraph and so on..

I tried to use document.getelementsbyclassname(). But I was not able to write logic to navigate to that particular location. Please help me out.

Answer 1

You can do this , like this

Working 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

You can try this. First, create a variable called, lets's say, number which stores which paragraph we currently need to scroll to. Like 1st, 2nd, etc. When the page loads, it's value will be 1 .

var number=1;

The next step is to add ids to all the orange paragraph. The first paragraph gets id orange1 , the second one gets id orange2 and so on. You can either do this manually or if there are too many paragraphs you can try adding it by looping or something like that.

Now assuming the Next button has an id called 'button' you can add this code:

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

    number++;
});

Now, whenever you click on the Next button, the page should scroll to the correct paragraph. Hope this helps.