拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 带有固定标题的平滑javascript滚动

带有固定标题的平滑javascript滚动

白鹭 - 2022-01-24 1964 0 0

再会。在网站上实作了 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

链接到站点带有固定标题的平滑 javascript 滚动

带滚动的剖面视图 带有固定标题的平滑 javascript 滚动

uj5u.com热心网友回复:

scroll-margin-top为您的部分设定一个

section{
 scroll-margin-top: 10px; /* normally that would be equal to your header's height */
}
标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *