Question

将链接元素滚动到各个部分时遇到问题。当我点击链接时，它必须滚动到部分的顶部。但我的例子是在节的中间。

<div class="anchor-container">
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
  <a href="#section3">Section 3</a>
  <a href="#section4">Section 4</a>
  <a href="#section5">Section 5</a>
</div>

我做错了什么？有什么建议？这是example

Answer 1

你需要在顶部留出一些等于锚容器高度的空间 here i take innerHeight of anchor-container to take space including padding, see here

 $(document).on('click', 'a[href^="#"]', function (event) {
        event.preventDefault();
            var topmenu = $(this).parent('.anchor-container').innerHeight()
        $('html, body').animate({
            scrollTop: $($.attr(this, 'href')).offset().top - topmenu
        }, 500);
    });

Answer 2

您需要考虑固定标头的高度。

...
 var headerHeight = $('.anchor-container').height();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top - headerHeight
    }, 500);
...

Updated codepen

滚动锚点到部分

2 个答案: