页面链接不能完美导航

Question

当我单击导航菜单中的某个链接时，它会在所需页面的下方导航一点。

https://www.youtube.com/watch?v=b5FilY-Xsc0&ab_channel=Kisgr%C3%B3foBulib%C3%A1r%C3%B3

https://szipuslinkek.github.io/

由于页眉的 position: fixed 和 height: 70px CSS 规则，我在 .main__top-row 上使用了 70 像素的边距。我尝试使用填充而不是边距，但它没有解决问题。

我该如何解决？

.header {
  position:   fixed;
  width:      100%;
  background: var(--primary-color);
  height:     70px;
  z-index:    1
}

  .header__img { height: 70px }

  .header__page-title {
    position:     relative;
    bottom:       20px;
    color:        var(--primary-text-color) !important;
    font-size:    30px !important;
    font-family:  "Times New Roman", serif
  }
  
  .header__menu {
  position:     fixed;
  font-size:    20px;
  top:          25px;
  color:        var(--primary-text-color);
  padding:      17px 10px;
  text-align:   center
  }

  @media (min-width: 768px) {
    .header__menu { display: none }
  }

    .header__menu__item {
      display:      block;
      background:   var(--primary-text-color);
      color:        var(--primary-color);
      padding:      2px 10px;
      border:       1px solid var(--primary-color)
    }

<header class="container header flex-space-between">

    <div class="header__img-container">
      <img class="header__img img-responsive" src="assets/profile.png" alt="Szipus Alfikah">
    </div>

    <div class="header__page-title-container">
      <h2 class="header__page-title">SzipusLinkek</h2>

      <details class="header__menu">
        <summary>Menü</summary>
        <a class="header__menu__item" href="#streamek">Streamek</a>
        <a class="header__menu__item" href="#elerhetosegeim">Elérhetőségeim</a>
        <a class="header__menu__item" href="#gyk-linkek">Gyk linkek</a>
        <a class="header__menu__item" href="#minecraft-map">Minecraft map</a>
      </details>

    </div>

    <div class="header__img-container">
      <img class="header__img img-responsive phone-display-none float-right" src="assets/profile.png" alt="Szipus Alfikah" class="right">
    </div>

  </header>

Answer 1

我不知道我说的对不对，但我认为没有 JS 是行不通的。您可以使用 JQuery 和下面的代码。

将 JQuery 添加到正文末尾：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

然后添加：

<script>
    $(document).ready(function(){
      $('.smoothScroll').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top - $("header").outerHeight() + 2 // This line determines the height of the header and subtracts it from the total displacement
            }, 700, "swing"); // The number here represents the speed of the scroll in milliseconds
            return false;
          }
        }
      });
    
    });

</script>

并向菜单中的所有 <a> 标签添加 class smoothScroll，如下所示：

<a class="header__menu__item smoothScroll" href="#streamek">Streamek</a>

SmoothScroll 函数来自 SO 上的另一个 post，但现在我不知道来自哪个。这样做的好处是它移动流畅，而不仅仅是跳到你想要的部分。

页面链接不能完美导航

Onpage links don't navigate perfectly

html

css

menu

hyperlink