>

진전이 있었으므로이 게시물을 편집하고 있습니다.
내 주 메뉴는 position:fixed 와 함께 페이지 상단에 가로로 있습니다. . 링크를 클릭 할 때 페이지가 각 대상으로 부드럽게 스크롤되도록 만들고 싶습니다. 내 끈적 끈적한 헤더로 인해 타겟이 뷰포트 상단에서 오프셋으로 표시되어야합니다.

내 HTML/CSS :

<style>
#main_menu {
 position: fixed;
}
</style>
<body>
<nav id="main_menu">
          <ul>
            <li><a href="#link1">Link 1</a></li>
            <li><a href="#link2">Link 2</a></li>
            <li><a href="different-page.html#link3">Link 3</a></li>
          </ul>
        </nav>

index.html의 주요 섹션 :

<main>
<h1 id="link1">Heading 1</h1>
<!-- some content -->
<h1 id="link2">Heading 2</h1>
<!-- some content -->
</main>

different-page.html의 주요 섹션 :

<main>
<!-- some content -->
<!-- some content -->
<!-- some content -->
<!-- some content -->
<h1 id="link3">Heading 3</h1>
<!-- some content -->
</main>

수정 : 이제 섹션 사이를 부드럽게 스크롤하기 위해 이것을 사용하고 있습니다 :

$('a[href*="#"]:not([href="#"])').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 - 220
      }, 1000);
      return false;
    }
  }
});

한 페이지의 섹션 사이를 부드럽게 스크롤하기 위해 노력하고 있습니다. 그러나 다른 페이지의 섹션에 링크하면 제대로 작동하지 않습니다.
예 :
<li><a href="#link1">Link 1</a></li>   <h1 id="link1">Heading 1</h1> 로  공장. 클릭하면 페이지가 제목 1로 아래로 스크롤되고 제목 1이 뷰포트 상단 아래 200px로 표시되고 끈적 거리는 헤더로 덮이지 않습니다.
<li><a href="different-page.html#link3">Link 3</a></li>  index.html에서 섹션 <h1 id="link3">Heading 3</h1> 로의 링크   different-page.html 에서  -200의 오프셋이 무시되는 것을 제외하고는 작동합니다. 이는 섹션 상단이 뷰포트 상단과 정렬되어 끈적 끈적한 탐색으로 덮여 있음을 의미합니다. 새 페이지로 이동하면 어떻게 든 js가 엉망이 될까요? 다른 페이지의 특정 섹션에 링크 할 때이 섹션이 뷰포트 상단에서 200px 떨어져 (아래가 아닌 헤더 아래)로드되도록 항상 오프셋을 염두에두고 싶습니다.
내가 이걸 올바르게 설명했으면 좋겠다.

  • 답변 # 1

    코드 변경 일부 CSS 변경 사항

     <style>
       html {
         scroll-behavior: smooth;
     }
        #main_menu {
        position: fixed;
     }
      </style>
     <body>
       <nav id="main_menu">
          <ul>
            <li><a href="#link1">Link 1</a></li>
            <li><a href="#link2">Link 2</a></li>
            <li><a href="#link3">Link 3</a></li>
          </ul>
        </nav>
       <main style="overflow-y:scroll;height:58vh">
       <h1 id="link1">Heading 1</h1>
       <!-- some content -->
      <h1 id="link2">Heading 2</h1>
       <!-- some content -->
      <h1 id="link3">Heading 3</h1>
     <!-- some content -->
       </main>
       <script>
     // ???
     </script>
    </body>
    
    

  • 이전 MySQL의 Alter Table은 하나의 코어 만 사용합니다
  • 다음 dind의 armhf/ubuntu에서 빌드 할 때 docker 파일의 파일에 에코가 실패 함