当你有固定标题时如何自动滚动到 div 部分

我下面有以下代码片段。当用户滚动经过标题时，它会变得粘性。然后，当他们单击标题One、Two、Three等中的任一选项卡时，它会向下滚动到相应的 div。由于某种原因，当我单击选项卡时，它会滚动经过 div。One就像我想滚动到、等部分的顶部Two，并在滚动时让它出现在粘性标题的正下方。现在，当我单击标题上的导航项目时，它会滚动经过粘性标题。有没有不同的方法来实现这一目标？<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; font-size: 28px; } #navbar { overflow: hidden; background-color: #333; padding: 25px 16px; } #navbar a { float: left; display: block; color: #f2f2f2; text-align: center; text-decoration: none; font-size: 17px; margin-right: 15px; } .content { padding: 16px; } .sticky { position: fixed; top: 0; width: 100%; z-index: 100; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.16); } .common { border: 1px solid black; padding: 200px 10px; margin-bottom: 20px; } </style> </head> <body> <div class="header"> <p>Scroll down to see the sticky effect.</p> </div> <div id="navbar"> <a onclick="headerClick(this); return false;" href="#">This is One</a> <a onclick="headerClick(this); return false;" href="#">This is Two</a> <a onclick="headerClick(this); return false;" href="#">This is Three</a> <a onclick="headerClick(this); return false;" href="#">This is Four</a> </div> <div class="content"> <div class="common" id="One">This is the first</div> <div class="common" id="Two">Two</div> <div class="common" id="Three">Three</div> <div class="common" id="Four">Four</div> <div class="common" id="Five">Five</div> <div class="common">Filler div to make scrolling longer</div> <div class="common">Filler div to make scrolling longer</div> <div class="common">Filler div to make scrolling longer</div> </div>

查看完整描述

2 回答

慕后森

TA贡献1802条经验获得超5个赞

问题是你的导航栏覆盖了 div 的顶部。您可以通过使用window.scrollBy()和offsetHeight将窗口再次向上滚动导航栏的高度来避免这种情况。该解决方案的优点是它不需要您知道导航栏的起始高度，因此它允许各种不同的浏览器配置。

function headerClick(elem) {

if (elem.innerHTML === 'One') {

document.getElementById("One").scrollIntoView();