jquery - 通过使用 jQuery 单击 anchor 来平滑滚动元素

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'));
   });

您滚动到的偏移量是您应该修复的元素中当前位置的偏移量

scrollTop: goTo.offset().top

到

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

可能有用