如何使用JavaScript滚动到目标html部分的垂直中心？
如何使用JavaScript滚动到目标html部分的垂直中心？
提问于 2018-10-04 00:59:01
我很难将这段代码转换成在iOS 11，Safari，Chrome和FF上使用相同行为的普通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
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-04 02:05:05
您正在将offsetUnit转换为一个字符串，然后尝试将其作为一个数字进行操作，但这是行不通的。此外，您需要将事件侦听器附加到每个链接(不能像使用jQuery那样将侦听器附加到集合)。您没有像在jQuery原始文件中那样指定在js中滚动到哪个section (相反，您只是将所有section元素的集合传递给您的函数)。更正了下面的带有注释的示例(下面的工作代码段中的干净示例)：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52632152
复制相关文章
相似问题