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

I guess this eariler post might help you http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — Rohit shah, Nov 19 '16 at 06:55
I have the same code, but its not working, because I am trying to scroll the content within scrollable div — Sanjeev Kumar, Nov 19 '16 at 07:03

score 1 · Accepted Answer · answered Nov 19 '16 at 07:23

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

thanks for the answer but my requirement is a bit different, where top nav is separate and content is in separate div and when clicked on nav items the content should move up/down within that div only. — Sanjeev Kumar, Nov 19 '16 at 07:31

score 0 · Answer 2 · answered Nov 19 '16 at 07:22

$(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.

its not working, its sliding to top but when you click again on nav its sliding back to top. — Sanjeev Kumar, Nov 19 '16 at 08:31

Onclick slide to content in scrollable div JQuery

2 Answers2