如何使用 JavaScript 滚动到目标 html 部分的垂直中心？

Question

我无法将此代码转换为可在 iOS 11、Safari、Chrome 和 FF 上以相同行为运行的 vanilla js。我遇到的主要问题是得到 offsetUnit，它帮助我滚动到该部分的中心，以便文本显示在窗口中间。

$(document).on('click', 'a[href^="#"]', function (e) {
  e.preventDefault();
  var offsetUnit = $(window).height() * 0.5;
  $('html, body').scrollTop($($.attr(this, 'href')).offset().top+offsetUnit);
});

* {
  margin: 0;
  padding: 0;
}

section {
  height: 200vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

section > div {
  height: 100vh;
  width: 100%;
  flex: 1;
  background-color: pink;
  display: flex;
  align-items: center;
  justify-content: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
  <ul>
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="#treatments">Treatments</a>
    </li>
    <li>
      <a href="#prices">Prices</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>

<section id="about"><div>About</div></section>
<section id="treatments"><div>Treatments</div></section>
<section id="prices"><div>Prices</div></section>
<section id="contact"><div>Contact</div></section>

目前在 vanilla js 中的失败尝试

function scrollPlease(element) {  
  const offsetUnit = (window.innerHeight + "px") * 0.5;
  window.scrollTo({
    'top': element.offsetTop + offsetUnit
  });
}

const link = document.querySelectorAll("[href='href_value']");
const section = document.querySelectorAll("section");

link.addEventListener('click', () => {
  scrollPlease(section);
});

https://codepen.io/2ne/pen/JmXPLB?editors=1010 - 链接到 codepen

Answer 1

您正在将offsetUnit 转换为字符串，然后尝试将其作为无效的数字进行操作。此外，您需要将事件侦听器附加到每个链接（您不能像使用 jQuery 那样将侦听器附加到集合）。您没有像在 jQuery 原始文件中那样指定要在 js 中滚动到哪个 section （相反，您只是将所有 section 元素的集合传递给您的函数）。用 cmets 更正了下面的示例（下面的工作 sn-p 中的干净示例）：

const links = document.querySelectorAll('a[href^="#"]');
const offsetUnit = window.innerHeight * 0.5;

// the "elems" variable below and the commented loop in the listener code mimic the original jquery scroll positioning
// const elems = document.querySelectorAll('html, body');

for (const link of links) {
  link.addEventListener('click', (event) => {
    event.preventDefault();
    const section = document.querySelector(event.currentTarget.getAttribute('href'));
    window.scrollTo(0, section.offsetTop + offsetUnit);
    
    // the loop below mimics the original jquery (same outcome as window.scrollTo above)
    // for (const elem of elems) {
    //   elem.scrollTop = section.offsetTop + offsetUnit;
    // }
    
  });
}

const links = document.querySelectorAll('a[href^="#"]');
const offsetUnit = window.innerHeight * 0.5;
for (const link of links) {
  link.addEventListener('click', (event) => {
    event.preventDefault();
    let section = document.querySelector(event.currentTarget.getAttribute('href'));
    window.scrollTo(0, section.offsetTop + offsetUnit);
  });
}

* {
  margin: 0;
  padding: 0;
}

section {
  height: 200vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

section > div {
  height: 100vh;
  width: 100%;
  flex: 1;
  background-color: pink;
  display: flex;
  align-items: center;
  justify-content: center;
}

<nav>
  <ul>
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="#treatments">Treatments</a>
    </li>
    <li>
      <a href="#prices">Prices</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>
<section id="about">
  <div>About</div>
</section>
<section id="treatments">
  <div>Treatments</div>
</section>
<section id="prices">
  <div>Prices</div>
</section>
<section id="contact">
  <div>Contact</div>
</section>