Originally published on my blog.
Check out my blog for more articles or Github for my free-to-read JavaScript Ebook that covers all the new features from ES6 to 2019

간단한 부드러운 스크롤 페이지 탐색 만들기

페이지의 다른 부분에 대한 링크가 있는 탐색 모음을 갖는 것은 많은 웹사이트의 매우 일반적인 기능입니다. 원하는 섹션으로 이동하는 대신 페이지를 부드럽게 스크롤할 수 있으면 즐거운 사용자 경험에서 성가신 사용자 경험으로 차이를 만들 수 있습니다. 이 짧은 자습서에서는 웹 페이지에서 간단하고 부드러운 스크롤 탐색 모음을 구현하는 방법을 살펴봅니다.

결과

내 블로그에서 파일을 다운로드할 수 있는 github repo에 대한 링크를 얻을 수 있습니다here.

HTML

우리가 만들 페이지의 구조는 매우 간단합니다. - 3개의 링크가 있는 탐색 모음 - 3개의 섹션이 있는 콘텐츠 영역 html 파일의 body 태그 안에 아래 코드를 복사하여 시작합니다.

    <!-- navigation -->
        <div id="navigation">
          <span><a href="#sectionLink1">
              Go to section 1
            </a></span>
          <span><a href="#sectionLink2">
              Go to section 2
            </a></span>
          <span><a href="#sectionLink3">
              Go to section 3
            </a></span>
        </div>
        <!-- content -->
        <div id="content">
          <div id="section1">Section 1</div>
          <div id="section2">Section 2</div>
          <div id="section3">Section 3</div>
        </div>

보시다시피 a 태그에는 대상 영역의 href와 정확히 일치하지 않는 id가 있습니다. 링크를 클릭할 때 href="section1"를 작성하면 페이지가 콘텐츠로 바로 이동하는데 우리는 이를 원하지 않고 부드럽게 스크롤하기를 원하므로 이름은 다르지만 비슷한 이름을 사용하여 이러한 자동 동작을 방지합니다. 재정의할 계획입니다.

CSS

지금 페이지를 보면 결과 gif에 있는 것과 전혀 다른 것을 볼 수 있습니다. style.css 파일을 열고 이 코드를 내부에 복사해 봅시다.

    /* basic styling to make the links bigger */
    #navigation {
      display: flex;
      /* make the navbar alway stay on top */
      position: fixed;
      top: 0;
      width: 100%;
      background-color: white;
    }

    #navigation span {
      flex-grow: 1;
      height: 50px;
      border: 1px solid black;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #navigation span a {
      display: inline-block;
    }

    /* when a link is clicked, it gets highlighted */
    .highlighted {
      color: red;
    }

    /* make each section taller and give them different colors */
    #content {
      margin-top: 50px;
    }

    #content div {
      height: 100vh;
      /* align the text in the middle */
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 3rem;
      font-weight: bold;
    }

    #section1 {
      background-color: lightcoral;
    }

    #section2 {
      background-color: lightblue;
    }

    #section3 {
      background-color: lightgreen;
    }

코드 자체는 매우 자명합니다. 주석을 보고 의심을 명확히 할 수 있습니다.

자바스크립트

이제 튜토리얼의 가장 중요한 부분에 대해 잠시 멈추고 원하는 결과를 얻는 방법을 생각해 봅시다. 각 링크에 이벤트 리스너를 추가하고 대상 섹션에 연결하여 부드러운 스크롤 동작을 추가해야 합니다.

    document.addEventListener("DOMContentLoaded", () => {
      //  little hack to detect if the user is on ie 11
      const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
      // get all the links with an ID that starts with 'sectionLink'
      const listOfLinks = document.querySelectorAll("a[href^='#sectionLink");
      // loop over all the links
      listOfLinks.forEach(function (link) {
        // listen for a click
        link.addEventListener('click',  () => {
          // toggle highlight on and off when we click a link
          listOfLinks.forEach( (link) => {
            if (link.classList.contains('highlighted')) {
              link.classList.remove('highlighted');
            }
          });
          link.classList.add('highlighted');
          // get the element where to scroll
          let ref = link.href.split('#sectionLink');
          ref = "#section" + ref[1];
          // ie 11 does not support smooth scroll, so we will simply scroll
          if (isIE11) {
            window.scrollTo(0, document.querySelector(ref).offsetTop);
          } else {
            window.scroll({
              behavior: 'smooth',
              left: 0,
              // top gets the distance from the top of the page of our target element
              top: document.querySelector(ref).offsetTop
            });
          }
        })
      })
    })

Internet Explorer 11에서 코드가 작동하도록 작은 트릭을 포함했음을 알 수 있습니다. 매우 틈새 웹사이트임에도 불구하고 엔터프라이즈 소프트웨어에서 작업하는 경우 한 번에 처리해야 할 것입니다. 당신에게 도움을 줄 가치가 있다고 생각했습니다. IE11은 부드러운 스크롤을 지원하지 않습니다. 튜토리얼 시작 부분에서 a 태그와 div 태그에 서로 다른 이름을 사용한 이유를 설명했습니다. 따라서 기본 클릭 동작을 '비활성화'하므로 여기에서 버튼을 클릭하면 사용자가 올바른 섹션으로 이동하도록 자체 버전을 수동으로 구현해야 합니다. IE11은 충분합니다. 코드를 자세히 살펴보겠습니다.

     listOfLinks.forEach(function (link) {
        // listen for a click
        link.addEventListener('click',  () => {
          // toggle highlight on and off when we click a link
          listOfLinks.forEach( (link) => {
            if (link.classList.contains('highlighted')) {
              link.classList.remove('highlighted');
            }
          });
          link.classList.add('highlighted');

먼저 탐색에 사용한 모든 a 태그를 가져오고 css 클래스를 토글하여 클릭 시 스타일을 다르게 지정합니다.

    let ref = link.href.split('#sectionLink');
          ref = "#section" + ref[1];
          // ie 11 does not support smooth scroll, so we will simply scroll
          if (isIE11) {
            window.scrollTo(0, document.querySelector(ref).offsetTop);
          } else {
            window.scroll({
              behavior: 'smooth',
              left: 0,
              // top gets the distance from the top of the page of our target element
              top: document.querySelector(ref).offsetTop
            });
          }

다음으로 클릭한 링크의 번호를 ref 변수에 저장하고 ref = "#section" + ref[1];로 타겟 섹션을 구성합니다. 부분. 완벽한 ! 이제 웹 사이트에서 부드러운 스크롤 내비게이션을 만드는 방법을 알았습니다.

계속해서 자신의 방식으로 구현하고 여기에서 시도/프로젝트에 대한 링크를 자유롭게 공유하십시오.

이 튜토리얼의 파일을 다운로드하려면 Githubhere 링크를 찾을 수 있습니다.


읽어주셔서 대단히 감사합니다. 자세한 내용은 내 블로그inspiredwebdev에서 나를 따르십시오.




Amazon 및 Leanpub에서 내 전자책 받기