홈>2020-03-18 11:13

javascript - 앵커 링크를 클릭 할 때 다른 페이지의 섹션으로 부드럽게 스크롤하는 방법은 무엇입니까?

진전이 있었으므로이 게시물을 편집하고 있습니다.
내 주 메뉴는 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 떨어져 (아래가 아닌 헤더 아래)로드되도록 항상 오프셋을 염두에두고 싶습니다.
내가 이걸 올바르게 설명했으면 좋겠다.

javascriptsmooth-scrolling

답변 # 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>

Python2.net

javascript - 앵커 링크를 클릭 할 때 다른 페이지의 섹션으로 부드럽게 스크롤하는 방법은 무엇입니까?

관련 자료