Scroll to section which exist inside a div

Question

I try to create a "help center" inside Drupal's Basic Page. I realize that I'm facing problem because the animate scrollTop appended to <div id="content-hc"> instead of body, html.

Due to the fact that I need specific height for div, in css you will find

#content-hc{
height:600px;
font-size:15px;
overflow:hidden;
overflow-y:scroll;
}

Now by clicking on nav menu I have in js:

var tg = jQuery(this).attr("href");
var oft = jQuery("section "+tg).offset().top;
jQuery("#content-hc").animate({scrollTop:oft-100});

In conclusion the problem:

<li>
<a href="#section1" class="parent">Section 1</a>
<ul>
<li>
<a href="#section1-1">Section 1.1</a>
</li>
</ul>
</li>

By clicking on one navigation element, content-hc scrolls to false position and on the second click in the same section didn't remain steady.

Any ideas why?

UPDATED CODE SNIPSET ON 28-4-2015

jQuery(document).ready(function() {
	jQuery("#nav-hc li a").click(function(){
		jQuery("#nav-hc li a").removeClass("current");
		jQuery(this).addClass("current");
		var tg = jQuery(this).attr("href");
		var oft = jQuery("section "+tg).offset().top;
		alert(oft);
		jQuery("#content-hc").animate({scrollTop:oft-100});
		return false;
	});
});

.helpcenter{

}

#nav-hc ul{
list-style: none;
margin:0;
}

#nav-hc ul li{
width:200px;
background-color: #222;
color: #fff;
margin-bottom:0;
padding: 10px;
border-bottom: 1px solid #3e3e3e;
text-align: -webkit-match-parent;
}

#nav-hc li a {
  color: #dcdcdc;
  display: block;
  -webkit-transition: background-color .2s ease;
  -moz-transition: background-color .2s ease;
  transition: background-color .2s ease;
}

#nav-hc li a.current {
  background: #00abea;
  color: #fff;
}

/*#nav-hc li a.parent {
  background: url(../img/plus-minus.png) 10px 10px no-repeat;
}*/

#content-hc{
height:600px;
font-size:15px;
overflow:hidden;
overflow-y:scroll;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>



<div class="helpcenter">
   <div class="col-md-3">
      <div id="nav-hc">
         <ul>
            <li>
               <a href="#section1" class="parent">Section 1</a>
			   <ul>
			      <li>
				  <a href="#section1-1">Section 1.1</a>
				  </li>
			   </ul>
            </li>
            <li>
               <a href="#section2" class="parent">Section 2</a>
			   <ul>
			      <li>
				  <a href="#section2-1">Section 2.1</a>
				  </li>
			   </ul>
            </li>
         </ul>
      </div>
   </div>
   <div class="col-md-9">
      <div id="content-hc">
	     <section id="section1">
		   <h2>Hello this is section 1</h2>
		   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisi dolor, tincidunt in magna at, porttitor lacinia velit. Nam sed volutpat ligula, vel euismod lorem. Duis commodo in justo sed commodo. Phasellus a vehicula libero, quis vulputate nisl. Phasellus pulvinar pellentesque vestibulum. Vivamus ut bibendum enim, at auctor odio. Phasellus ullamcorper, nisl vitae bibendum elementum, diam lectus sagittis nulla, et sagittis libero quam nec mauris. Maecenas quis gravida magna. Aenean feugiat erat non auctor tincidunt. Pellentesque lacus dui, faucibus at hendrerit condimentum, fermentum et purus. Nulla volutpat cursus risus sit amet porta. Sed nec finibus nisl, scelerisque blandit nisi. Mauris quis neque pretium, consequat leo vel, consequat sapien.</p>

<p>Proin consequat est sit amet cursus luctus. Donec consectetur neque nulla, lobortis ultricies neque aliquam in. Morbi non nibh quis ligula mollis feugiat. Nullam sagittis mi vitae auctor aliquam. Donec sodales justo erat, a malesuada ligula ultricies eget. Nam massa dolor, placerat ultricies metus eu, sagittis facilisis neque. Suspendisse nec mattis erat, a ornare erat. Aliquam tellus felis, tempor quis dictum vel, efficitur at turpis. Phasellus eu nisl tempus, efficitur arcu in, pellentesque neque. Vivamus eu gravida augue. Donec ultrices purus feugiat mi iaculis interdum. Suspendisse quam purus, venenatis et diam id, elementum interdum diam. Nullam vel ligula at felis mattis blandit. Duis eget turpis quis nibh laoreet mattis ac at ex. Suspendisse sollicitudin leo non dolor commodo, ac efficitur elit faucibus.

Fusce molestie quam vitae lacus eleifend vehicula. Morbi vel neque eleifend, pulvinar sapien at, interdum massa. Morbi tempor congue magna non gravida. Etiam varius lacus purus, ac laoreet sapien lobortis sit amet. Vestibulum at porta lorem. Ut quis tellus feugiat, vulputate nibh et, fringilla dolor. Integer non lectus auctor felis placerat vestibulum a vitae leo. Nulla euismod sit amet sem eu tristique.</p>

<p>Aliquam maximus massa eget arcu molestie viverra. Etiam odio arcu, gravida at augue sit amet, sollicitudin viverra sapien. Praesent gravida risus mi, non ultricies justo fermentum in. Donec ac lorem eu orci vulputate convallis. Quisque sagittis eros non rutrum dictum. Sed augue turpis, commodo ac purus a, volutpat tempor massa. Duis in urna a ligula porta elementum. Proin suscipit lectus id massa aliquam, eget porta metus fermentum.</p>

<p>Quisque volutpat dapibus tincidunt. Aenean ac velit egestas, varius ex vel, sollicitudin turpis. Praesent in augue eget lectus tempus posuere a malesuada neque. Cras vehicula est sit amet felis vulputate molestie. Duis vestibulum nisi metus, et pharetra erat dignissim id. Curabitur elementum mi at magna condimentum pharetra. Vestibulum cursus, odio at ultrices dignissim, eros leo finibus velit, a euismod dui nisl eu enim.</p>
		   <section id="section1-1">
		      <h2>Hello this is section 1.1</h2>
			  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisi dolor, tincidunt in magna at, porttitor lacinia velit. Nam sed volutpat ligula, vel euismod lorem. Duis commodo in justo sed commodo. Phasellus a vehicula libero, quis vulputate nisl. Phasellus pulvinar pellentesque vestibulum. Vivamus ut bibendum enim, at auctor odio. Phasellus ullamcorper, nisl vitae bibendum elementum, diam lectus sagittis nulla, et sagittis libero quam nec mauris. Maecenas quis gravida magna. Aenean feugiat erat non auctor tincidunt. Pellentesque lacus dui, faucibus at hendrerit condimentum, fermentum et purus. Nulla volutpat cursus risus sit amet porta. Sed nec finibus nisl, scelerisque blandit nisi. Mauris quis neque pretium, consequat leo vel, consequat sapien.</p>

<p>Proin consequat est sit amet cursus luctus. Donec consectetur neque nulla, lobortis ultricies neque aliquam in. Morbi non nibh quis ligula mollis feugiat. Nullam sagittis mi vitae auctor aliquam. Donec sodales justo erat, a malesuada ligula ultricies eget. Nam massa dolor, placerat ultricies metus eu, sagittis facilisis neque. Suspendisse nec mattis erat, a ornare erat. Aliquam tellus felis, tempor quis dictum vel, efficitur at turpis. Phasellus eu nisl tempus, efficitur arcu in, pellentesque neque. Vivamus eu gravida augue. Donec ultrices purus feugiat mi iaculis interdum. Suspendisse quam purus, venenatis et diam id, elementum interdum diam. Nullam vel ligula at felis mattis blandit. Duis eget turpis quis nibh laoreet mattis ac at ex. Suspendisse sollicitudin leo non dolor commodo, ac efficitur elit faucibus.

Fusce molestie quam vitae lacus eleifend vehicula. Morbi vel neque eleifend, pulvinar sapien at, interdum massa. Morbi tempor congue magna non gravida. Etiam varius lacus purus, ac laoreet sapien lobortis sit amet. Vestibulum at porta lorem. Ut quis tellus feugiat, vulputate nibh et, fringilla dolor. Integer non lectus auctor felis placerat vestibulum a vitae leo. Nulla euismod sit amet sem eu tristique.</p>

<p>Aliquam maximus massa eget arcu molestie viverra. Etiam odio arcu, gravida at augue sit amet, sollicitudin viverra sapien. Praesent gravida risus mi, non ultricies justo fermentum in. Donec ac lorem eu orci vulputate convallis. Quisque sagittis eros non rutrum dictum. Sed augue turpis, commodo ac purus a, volutpat tempor massa. Duis in urna a ligula porta elementum. Proin suscipit lectus id massa aliquam, eget porta metus fermentum.</p>

<p>Quisque volutpat dapibus tincidunt. Aenean ac velit egestas, varius ex vel, sollicitudin turpis. Praesent in augue eget lectus tempus posuere a malesuada neque. Cras vehicula est sit amet felis vulputate molestie. Duis vestibulum nisi metus, et pharetra erat dignissim id. Curabitur elementum mi at magna condimentum pharetra. Vestibulum cursus, odio at ultrices dignissim, eros leo finibus velit, a euismod dui nisl eu enim.</p>
		   </section>
		 </section>
		 <section id="section2">
		   <h2>Hello this is section 2</h2>
		   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisi dolor, tincidunt in magna at, porttitor lacinia velit. Nam sed volutpat ligula, vel euismod lorem. Duis commodo in justo sed commodo. Phasellus a vehicula libero, quis vulputate nisl. Phasellus pulvinar pellentesque vestibulum. Vivamus ut bibendum enim, at auctor odio. Phasellus ullamcorper, nisl vitae bibendum elementum, diam lectus sagittis nulla, et sagittis libero quam nec mauris. Maecenas quis gravida magna. Aenean feugiat erat non auctor tincidunt. Pellentesque lacus dui, faucibus at hendrerit condimentum, fermentum et purus. Nulla volutpat cursus risus sit amet porta. Sed nec finibus nisl, scelerisque blandit nisi. Mauris quis neque pretium, consequat leo vel, consequat sapien.</p>

<p>Proin consequat est sit amet cursus luctus. Donec consectetur neque nulla, lobortis ultricies neque aliquam in. Morbi non nibh quis ligula mollis feugiat. Nullam sagittis mi vitae auctor aliquam. Donec sodales justo erat, a malesuada ligula ultricies eget. Nam massa dolor, placerat ultricies metus eu, sagittis facilisis neque. Suspendisse nec mattis erat, a ornare erat. Aliquam tellus felis, tempor quis dictum vel, efficitur at turpis. Phasellus eu nisl tempus, efficitur arcu in, pellentesque neque. Vivamus eu gravida augue. Donec ultrices purus feugiat mi iaculis interdum. Suspendisse quam purus, venenatis et diam id, elementum interdum diam. Nullam vel ligula at felis mattis blandit. Duis eget turpis quis nibh laoreet mattis ac at ex. Suspendisse sollicitudin leo non dolor commodo, ac efficitur elit faucibus.

Fusce molestie quam vitae lacus eleifend vehicula. Morbi vel neque eleifend, pulvinar sapien at, interdum massa. Morbi tempor congue magna non gravida. Etiam varius lacus purus, ac laoreet sapien lobortis sit amet. Vestibulum at porta lorem. Ut quis tellus feugiat, vulputate nibh et, fringilla dolor. Integer non lectus auctor felis placerat vestibulum a vitae leo. Nulla euismod sit amet sem eu tristique.</p>

<p>Aliquam maximus massa eget arcu molestie viverra. Etiam odio arcu, gravida at augue sit amet, sollicitudin viverra sapien. Praesent gravida risus mi, non ultricies justo fermentum in. Donec ac lorem eu orci vulputate convallis. Quisque sagittis eros non rutrum dictum. Sed augue turpis, commodo ac purus a, volutpat tempor massa. Duis in urna a ligula porta elementum. Proin suscipit lectus id massa aliquam, eget porta metus fermentum.</p>

<p>Quisque volutpat dapibus tincidunt. Aenean ac velit egestas, varius ex vel, sollicitudin turpis. Praesent in augue eget lectus tempus posuere a malesuada neque. Cras vehicula est sit amet felis vulputate molestie. Duis vestibulum nisi metus, et pharetra erat dignissim id. Curabitur elementum mi at magna condimentum pharetra. Vestibulum cursus, odio at ultrices dignissim, eros leo finibus velit, a euismod dui nisl eu enim.</p>
		   <section id="section2-1">
		      <h2>Hello this is section 2.1</h2>
			  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisi dolor, tincidunt in magna at, porttitor lacinia velit. Nam sed volutpat ligula, vel euismod lorem. Duis commodo in justo sed commodo. Phasellus a vehicula libero, quis vulputate nisl. Phasellus pulvinar pellentesque vestibulum. Vivamus ut bibendum enim, at auctor odio. Phasellus ullamcorper, nisl vitae bibendum elementum, diam lectus sagittis nulla, et sagittis libero quam nec mauris. Maecenas quis gravida magna. Aenean feugiat erat non auctor tincidunt. Pellentesque lacus dui, faucibus at hendrerit condimentum, fermentum et purus. Nulla volutpat cursus risus sit amet porta. Sed nec finibus nisl, scelerisque blandit nisi. Mauris quis neque pretium, consequat leo vel, consequat sapien.</p>

<p>Proin consequat est sit amet cursus luctus. Donec consectetur neque nulla, lobortis ultricies neque aliquam in. Morbi non nibh quis ligula mollis feugiat. Nullam sagittis mi vitae auctor aliquam. Donec sodales justo erat, a malesuada ligula ultricies eget. Nam massa dolor, placerat ultricies metus eu, sagittis facilisis neque. Suspendisse nec mattis erat, a ornare erat. Aliquam tellus felis, tempor quis dictum vel, efficitur at turpis. Phasellus eu nisl tempus, efficitur arcu in, pellentesque neque. Vivamus eu gravida augue. Donec ultrices purus feugiat mi iaculis interdum. Suspendisse quam purus, venenatis et diam id, elementum interdum diam. Nullam vel ligula at felis mattis blandit. Duis eget turpis quis nibh laoreet mattis ac at ex. Suspendisse sollicitudin leo non dolor commodo, ac efficitur elit faucibus.

Fusce molestie quam vitae lacus eleifend vehicula. Morbi vel neque eleifend, pulvinar sapien at, interdum massa. Morbi tempor congue magna non gravida. Etiam varius lacus purus, ac laoreet sapien lobortis sit amet. Vestibulum at porta lorem. Ut quis tellus feugiat, vulputate nibh et, fringilla dolor. Integer non lectus auctor felis placerat vestibulum a vitae leo. Nulla euismod sit amet sem eu tristique.</p>

<p>Aliquam maximus massa eget arcu molestie viverra. Etiam odio arcu, gravida at augue sit amet, sollicitudin viverra sapien. Praesent gravida risus mi, non ultricies justo fermentum in. Donec ac lorem eu orci vulputate convallis. Quisque sagittis eros non rutrum dictum. Sed augue turpis, commodo ac purus a, volutpat tempor massa. Duis in urna a ligula porta elementum. Proin suscipit lectus id massa aliquam, eget porta metus fermentum.</p>

<p>Quisque volutpat dapibus tincidunt. Aenean ac velit egestas, varius ex vel, sollicitudin turpis. Praesent in augue eget lectus tempus posuere a malesuada neque. Cras vehicula est sit amet felis vulputate molestie. Duis vestibulum nisi metus, et pharetra erat dignissim id. Curabitur elementum mi at magna condimentum pharetra. Vestibulum cursus, odio at ultrices dignissim, eros leo finibus velit, a euismod dui nisl eu enim.</p>
		   </section>
		 </section>
	  </div>
   </div>
</div>

Answer 1

Usually when you want to use some kind of anchors stuff you'll do this way :

<div id="last-news">...</div> //The div you want to reach

And then just do your link :

<a href="#last-news">... </a> //When you click on it the page will scroll to the div with the id last-news

Check the "anchor" element for details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a