title: click on a link to scroll to a particular div (jquery)
body: <p>When i click a link and try to scroll to a particular div with slow animation the whole page get scrolled instead of that particular div.
  I am sharing the link to the plnkr below open it in full screen mode.</p>
  
  <p><a href="http://plnkr.co/edit/5ZlY7ivJ2xwckVeyIRzO?p=preview" rel="nofollow">http://plnkr.co/edit/5ZlY7ivJ2xwckVeyIRzO?p=preview</a></p>
  
  <p>for full screen loading</p>
  
  <p><a href="http://run.plnkr.co/HV426GUKePHeJPfS/" rel="nofollow">http://run.plnkr.co/HV426GUKePHeJPfS/</a></p>
  
  <p>The problem is that when the content present in the right hand side panel is clicked (only recommendation and cme &amp; Attended is to cliked) the middle-panel should be scrolled to show that particular div on the top.
  Instead what's happening is the whole page is getting scrolled thus making the UI not much of use.
  I have tried using the following two javascript code for showing some animation and scrolling the middle_profile  div or mm div but none of them is working.</p>
  
  <p>for scrolling middle_profile div</p>
  
  <pre><code>$("#bb").click(function() {
    $('.middle_profile').animate({
      scrollTop: $("#recommendationDiv").position().top
    }, 'slow');
  });
  $("#bb1").click(function() {
    $('.middle_profile').animate({
      scrollTop: $("#CMEDiv").offset().top
    }, 'slow');
  });
  </code></pre>
  
  <p>for scrolling mm div</p>
  
  <pre><code>var scrolled = 0;
  $("#bb").on("click", function() {
    scrolled = scrolled - 300;
    $(".mm").animate({
      scrollTop: scrolled
    }, 50);
  });
  </code></pre>
  
  <p>Is there another way of doing it through jquery or some other library is to be included for smooth scrolling the page?</p>