Плавная прокрутка для привязки внутри div

Я пытаюсь сделать плавную прокрутку внутри div, я почти все делаю, но у меня есть проблема. Когда я нажимаю ссылку, прокрутка перемещается в позицию, но смещение прокрутки является верхней страницей. Другая проблема заключается в том, что я могу щелкнуть 2 раза по одной и той же ссылке, и прокрутка прыгает?

кто-нибудь знает, как это исправить?

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>