Smooth scrolling to anchor inside div

Question

I try to make smooth scroll inside div I almost make all but I have some issue. When I click link scroll move to position but scrolling offset is top page. Another problem is that I can click 2 times in same link and scroll is jumping?

anyone know how to fix it?

jsfiddle

JS:

$(document).ready(function(){
  $('.m_nav a').click(function(){
      $('.marken-box').animate({
          scrollTop: $( $.attr(this, 'href') ).offset().top
      }, 300);
      return false;
  });
});

HTML:

<div class="spacer"></div>
<div class="m_nav">
    <a href="#m_a">A</a>
    <a href="#m_b">B</a>
    <a href="#m_c">C</a>
    <a href="#m_d">D</a>
</div>


<div class="marken-box">
    <ul class="marken">
        <li class="slide">
            <span id="m_a">A</span>
        </li>
        <li class="slide">
            <div class="spacer">Lorem</div>
        </li>
        <li class="slide">
            <span id="m_b">B</span>
        </li>
        <li class="slide">
            <div class="spacer">Lorem</div>
        </li>
        <li class="slide">
            <span id="m_c">C</span>
        </li>
        <li class="slide">
            <div class="spacer">Lorem</div>
        </li>
        <li class="slide">
            <span id="m_d">D</span>
        </li>
        <li class="slide">
            <div class="spacer">Lorem</div>
        </li>
    </ul>
</div>

Answer 1

I used this once.. http://flesler.blogspot.co.il/2007/10/jquerylocalscroll-10.html

If you are into working with plugins