当我单击 link_div 中特定部分的链接时，我想滚动到 content_div 的部分。
我尝试使用javascript，但我无法正确处理这个问题。这个带有全身元素的卷轴。
我的页面是这样的
<body>
<div>header/navbar</div>
<div>hero section</div>
<div class="container position-relative">
<div class="row d-flex">
<div class="col-3 link_div position-sticky">
<ul>
<li><span showSection(section1)>Section 1</span></li>
<li><span showSection(section2)>Section 2</span></li>
<li><span showSection(section3)>Section 3</span></li>
<li><span showSection(section4)>Section 4</span></li>
<li><span showSection(section5)>Section 5</span></li>
</ul>
</div>
<div class="col-9 content_div">
<div id="section1" class="height-300"></div>
<div id="section2" class="height-300"></div>
<div id="section3" class="height-300"></div>
<div id="section4" class="height-300"></div>
<div id="section5" class="height-300"></div>
</div>
</div>
</div>
</body>
我使用javascript的方法，例如-scrollTo、scrollBy、scrollIntoView，但任何人都无法正常工作
function showSection(sectionId) {
var targetSection = document.getElementById(sectionId);
var contentDiv = document.getElementById('content_div');
if (targetSection && contentDiv) {
var contentDivRect = contentDiv.getBoundingClientRect();
var sectionRect = targetSection.getBoundingClientRect();
var scrollPosition = sectionRect.top - contentDivRect.top + contentDiv.scrollTop;
window.scrollTo(0, scrollPosition);
}
}
我也试试这个-
function showSection(sectionId) {
var selectedSection = document.getElementById(sectionId);
if (selectedSection) {
const scrollOffset = targetElement.offsetTop - scrollableDiv.offsetTop;
scrollableDiv.scrollTop = scrollOffset;
selectedSection.scrollIntoView({ behavior: 'smooth' });
}
}
不需要为此使用 JS。 HTML 有一个默认的“跳转到元素”工具。您只需要使用
<a>#html {
scroll-behavior: smooth;
}
/* for demonstration porpuse only */
.content_div > div {
border: 2px dashed red;
min-height: 60vh;
}
<div class="row d-flex">
<div class="col-3 link_div position-sticky">
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
<li><a href="#section5">Section 5</a></li>
</ul>
</div>
<div class="col-9 content_div">
<div id="section1" class="height-300">div 1</div>
<div id="section2" class="height-300">div 2</div>
<div id="section3" class="height-300">div 3</div>
<div id="section4" class="height-300">div 4</div>
<div id="section5" class="height-300">div 5</div>
</div>
</div>