Question

页面有3个部分：

<div class="container" id="main-container">
    <div class="section" id="profile">
      Hello World
    </div>
    <div class="section" id="projects">
      Hello World 2
    </div>
    <div class="section" id="contact">
      Hello World 3
    </div>
  </div>

我的导航中有3个链接：

<body onresize="scroll()">
  <div class="nav">
    <div class="nav-link" id="profile">
      <a>
        Profile
      </a>
    </div>
    <div class="nav-link" id="projects">
      <a>
        Projects
      </a>
    </div>
    <div class="nav-link" id="contact">
      <a>
        Contact
      </a>
    </div>
  </div>

#main-container具有溢出滚动，并且每个部分占据页面的宽度和高度的100％。

我试图做到这一点，以便当单击其中一个链接时，它可以使该部分的滚动效果动起来：

$(document).ready(function () {
  $('.nav-link').on('click', function () {
    if ($(window).width() < 768) {
      let section = $(".section#"+$(this).attr('id')).position();
      $('#main-container').animate({
          scrollTop: section.top
      }, 500);
    }
  });
});

但是这不起作用，position()的值根据用户滚动到的位置而改变。如何基于$main-container获取#main-container的某个部分的滚动位置？以及如何使滚动动画呢？

Answer 1

只需尝试 offset（）

let section = $（“。section＃” + $（this）.attr（'id'））。offset（）;

Answer 2

let section = $(".section#"+$(this).attr('id')).offset();
  let scrollTop = $('#main-container').scrollTop() + section.top
  console.log(scrollTop);
  $('#main-container').animate({
      scrollTop: scrollTop
  }, 500);

这是我为了使其正常工作而进行的更改

根据div在父级中的位置滚动父级div溢出

2 个答案: