再會。在網站上實作了 javascript 的平滑滾動。一切正常，頁面本身嚴格滾動到所需部分的開頭。但是由于我有一個固定的標題，但它占用了部分審查。問題是如何將此標題的高度添加到滾動條
js
const anchors = document.querySelectorAll('.scroll-href')
anchors.forEach(item => {
item.addEventListener('click', (e) => {
e.preventDefault()
const blockID = item.dataset.scroll
document.getElementById(blockID).scrollIntoView({
behavior: 'smooth',
block: 'start'
})
})
})
hmtl
<header class="header">
Some content
</header>
<a href="#" data-scroll="reviews-section">Scroll to reviews</a>
<a href="#" data-scroll="services-section">Scroll to services</a>
<a href="#" data-scroll="cases-section">Scroll to cases</a>
<a href="#" data-scroll="footer-section">Scroll to footer</a>
<section class="reviews" id="reviews-section">Some content</section>
<section class="services" id="services-section">Some content</section>
<section class="reviews" id="cases-section">Some content</section>
<section class="reviews" id="footer-section">Some content</section>
css
.header
padding: 10px 0px
position: fixed
top: 0
left: 0
width: 100%
background-color: #050505
z-index: 10
鏈接到站點
帶滾動的剖面視圖
uj5u.com熱心網友回復：
scroll-margin-top為您的部分設定一個
section{
scroll-margin-top: 10px; /* normally that would be equal to your header's height */
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/408401.html
標籤：