Плавный прокрутка элемента путем нажатия на якорь с помощью jQuery

Question

У меня есть фиксированный div (#navigation) в левой части моей страницы и прокручиваемый div (#content) справа. При щелчке по ссылке в #navigation, она должна запускать плавный прокрутку к разделу коррекции #content. Что происходит после того, как вы нажмете второй раз на ссылке, он перейдет в неправильный раздел #content. Вы можете проверить все фактические исходный код в http://germanespitia.com

так ..

навигация:

<div id="navigation"> 
     `enter code here` <div class="nav-item" data-page="about-me"> 
      <a href="#about-me" > 
      </a> 
     </div> 
     <div class="nav-item" data-page="projects"> 
      <a href="#projects" > 
      </a> 
     </div> 
     <div class="nav-item" data-page="portfolio"> 
      <a href="#portfolio" > 
      </a> 
     </div> 
     <div class="nav-item" data-page="contact"> 
      <a href="#contact" > 
      </a> 
     </div> 
    </div> 

содержание:

<div id="content"> 
     <div class="section" id="about-me"> 
     </div> 
     <div class="section" id="projects"> 
     </div> 
</div> 

JQuery:

$('#navigation a').click(function() { 
    var goTo = $($(this).attr('href')); // selects element that was clicked 
    var offset = goTo.offset(); //grabs position of element 
    $('#content').animate({ 
     scrollTop: goTo.offset().top 
    }, 1000); 
    return false; 
    $('#about-me h1').text(goTo.attr('href')); 
    }); 

Answer 1

$('#navigation a').click(function() { 
    var goTo = $($(this).attr('href')); // selects element that was clicked 
    var offset = goTo.offset(); //grabs position of element 
    $('#content').animate({ 
     scrollTop: goTo.offset().top 
    }, 1000); 
    return false; 
    $('#about-me h1').text(goTo.attr('href')); 
    }); 

Смещение, вы scrollTo является смещение текущей позиции в элементе вы должны исправить

scrollTop: goTo.offset().top 

Для

scrollTop: $('#content')[0].scrollTop + goTo.offset().top 

мощь работает

Answer 2

Прокрутка работает правильно только тогда, когда смещение достаточно большой он работает быстрее, чтобы завершить в 1000 мс, который вы передали в функцию animate. Одна из идей - рассчитать время, необходимое для завершения анимации, исходя из разницы в текущем смещении и той, где мы хотим достичь. Как это:

$('#navigation a').on("click", function() { 
    var gt = $($(this).attr('href')), 
     ofs = gt.offset(), 
     tp = ofs.top, 
     crOff = $('#content').scrollTop(),   
     anim = Math.abs(crOff - tp) * 100; //ESTIMATE TIME TO ANIMATE 
    if (x > 3000) x = 3000;//IF GAP IS TOO LARGE, IT IS PAINFULLY SLOW 
    $('#content').stop().animate({ 
     scrollTop: tp 
    }, anim); //USE anim VARIABLE TO CONTROL ANIMATION TIME 
    event.preventDefault(); 
    event.stopPropagation(); 
}); 

Посмотрите на эту скрипку: http://jsfiddle.net/Vqce7/