Onclick slide to content in scrollable div JQuery

Question

I am trying to click to slide to content in a scroll-able div but its not sliding, this is the JSfiddle

The JS I am trying is following

$(".nav > li:nth-child(1)").click(function() {
    $('.scrollable_content_main').animate({
        scrollTop: $("#tab1").offset().top
    }, 1000);
});
$(".nav > li:nth-child(4)").click(function() {
//alert();
    $('.scrollable_content_main').animate({
        scrollTop: $("#tab4").offset().top
    }, 1000);
});

Answer 1

As per your requirement, you can try below solution for SMOOTH scrolling...

Answer should be short and precise, so adding code to Fiddle

Working Demo

JS Code:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Answer 2

 $(document).ready(function (){ $(".nav > li:nth-child(1)").click(function() { $('.scrollable_content_main').animate({ scrollTop: $("#te1").offset().top }, 1000); }); $(".nav > li:nth-child(4)").click(function() { //alert(); $('.scrollable_content_main').animate({ scrollTop: $("#te4").offset().top }, 1000); }); }); 

Change your script to this.

 <ul class="nav"> <li id="tab1">tab 1</li> <li id="tab2">tab 2</li> <li id="tab3">tab 3</li> <li id="tab4">tab 4</li> <li id="tab5">tab 5</li> </ul> <div class="scrollable_content_main"> <div id="te1"> <p> <span id="sec1">section 1</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p></div> <div id="te2"><p> <span id="sec2">section 2</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div> <div id="te3"> <p> <span id="sec3">section 3</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div> <div id="te4"> <p> <span id="sec4">section 4</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <p></div> <div id="te5"> <p> <span id="sec5">section 5</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div> </div> 

Change your body to this.

Hope this work for you.