Jquery - Inpage Scroll Smooth Links With Button Next And Prev

I found this site and i want the way it work but unfortunately I have less knowledge in jquery but I know how to do simple modification to make it work, my current js code is here

Solution 1:

I have updated your markup and script to do what you want. One of the main issues was that you were using the same class name on the prev & next buttons...

The updated script uses a single function to control the scrolling. The various buttons update the item index to scroll to, then call that function.

here's your updated fiddle. and your updated JS.

var itemIndex = 1;
functionscrollToContent() {

    //dont allow zero or greater than 5if (itemIndex <= 1) {
        itemIndex = 1;
        $('#fade').hide();
    }
    else{
        $('#fade').show();
    }
    if (itemIndex >= 5) {
        itemIndex = 5;
        $('#fade1').hide();
    }
    else{
        $('#fade1').show();
    }
    //scroll
    $('html, body').animate({
        scrollTop : $('#content' + itemIndex).offset().top
    }, 2000);
    //add & remove active class name
    $('button.active').removeClass('active');
    $('.navigation li:nth-child(' + itemIndex + ') button').addClass('active');
}

//click handlersfunctionclickFuncs() {
    $(".navigation button").click(function() {
        itemIndex = $(this).attr('data-index');
        scrollToContent();
    });

    $('#fade1').click(function() {++itemIndex;
        scrollToContent();
    });

    $('#fade').click(function() {--itemIndex;
        scrollToContent();
    });
}


$(document).ready(function() {

    //setup click handlersclickFuncs();

});

updated HTML

<ulclass="navigation"><li><buttondata-index="1">content1</button></li><li><buttondata-index="2">content2</button></li><li><buttondata-index="3">content3</button></li><li><buttondata-index="4">content4</button></li><li><buttondata-index="5">content5</button></li></ul><pclass="buttons"><buttonid="fade">prev</button><buttonid="fade1">next</button></p>