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

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

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

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>

источник

2014-09-02 Ponciusz