animate with scrollTop with Fixed Div

Question

I have two section on screen, Left Side has menu items and right side has content. Content div is fixed position with auto scroll.

Left Side menu has 3 items and on click on any item, i want user to navigate to That particular section on content div(fixed) .

MY CODE

function goToByScroll(id) {
  // Scroll
  $('.content-pos-fixed').animate({
    scrollTop: $("#" + id).offset().top - 152
  },'slow');
}

For some reason It does not work as expected.

Answer 1

Try this code

function goToByScroll(id,event) {
    event.preventDefault();
    $('.content-pos-fixed').animate({
        scrollTop: $(id).offset().top+$('.content-pos-fixed').scrollTop() 
    },'slow');
}

$(document).ready(function(){
	$('a').on('click',function(event){
  	var id=$(this).attr('href');
    goToByScroll(id,event);
  });
  function goToByScroll(id,event) {
  event.preventDefault();
    $('.content-pos-fixed').animate({
       scrollTop: $(id).offset().top+$('.content-pos-fixed').scrollTop() },'slow');
      }
});

* { margin: 0; padding: 0; box-sizing: border-box; font-family: arial; text-decoration: none; color: black; }

nav { position: fixed; top: 0; left: 0; right: 0; background: #fff; z-index: 9999; }
nav a { color: white; display: inline-block; padding: 1rem; float: left; font-weight: bold; }

section { height: 100vh; }

nav a:nth-child( 3n + 1), main section:nth-child( 3n + 1) { background: #B1A464; }
nav a:nth-child( 3n + 2), main section:nth-child( 3n + 2) { background: #2d74b2; }
nav a:nth-child( 3n + 3), main section:nth-child( 3n + 3) { background: #e5ec10; }
nav a:nth-child( 3n + 4), main section:nth-child( 3n + 4) { background: #cfa5df; }

div { position: relative; padding: 1rem; }

footer { background: rgba(255, 255, 255, 0.4); height: 55px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 7777; }
.down { background: white; display: block; border-radius: 100px; width: 50px; height: 50px; position: fixed; bottom: 5%; right: 5%; z-index: 8888; }
.down::after { content: "▼"; position: relative; left: 15px; top: 15px; }
nav a {
    color: white;
    display: inline-block;
    padding: 1rem;
    float: left;
    font-weight: bold;
    width: 100%;
}
nav {
    position: fixed;
    /* top: 0; */
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9999;
    width: 300px;
    height: 100%;
}
main {
    float: right;
    width: calc(100% - 300px);
    overflow: auto;
    position: fixed;
    right: 0;
    height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<nav data-scroll-header>
			<a data-scroll href="#Home">Home</a>
			<a data-scroll href="#About">About</a>
			<a data-scroll href="#Services">Services</a>
			<a data-scroll href="#Contact">Contact</a>
		</nav>
        
        <main class="content-pos-fixed">
            <section id="Home">
                <div>
                    <h1>Home</h1>
                </div>
            </section>
            
            <section id="About">
                <div>
                    <h1>About</h1>
                </div>
            </section>
            <section id="Services">
                <div>
                    <h1>Services</h1>
                </div>
            </section>
            <section id="Contact">
                <div>
                    <h1>Contact</h1>
                </div>
            </section>
        </main>

<footer>
    <a data-scroll href="#About" class="down"></a>
</footer>