根據父級中div的位置滾動父div溢出

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()的值根據用戶滾動到的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 個解決方案

解決方案1
0 2019-05-30 11:13:50

解決方案2
0 2019-05-30 11:24:55

根據父級中div的位置滾動父div溢出

問題描述

2 個解決方案

解決方案1 0 2019-05-30 11:13:50

解決方案2 0 2019-05-30 11:24:55

解決方案1
0 2019-05-30 11:13:50

解決方案2
0 2019-05-30 11:24:55