부드러운 스크롤은 페이지 섹션 간을 쉽게 탐색할 수 있도록 하여 사용자 경험을 향상시키는 최신 마이크로 애니메이션 기능입니다. 즉시 섹션으로 이동하는 대신 부드러운 스크롤을 통해 부드럽고 매력적인 전환이 이루어집니다. 갑작스러운 점프로 사용자를 압도하지 않고 사용자의 참여를 유지하는 멋진 방법입니다.

이 글에서는 부드러운 스크롤을 구현하는 두 가지 방법을 살펴보겠습니다.

• CSS 사용
• 자바스크립트 사용

먼저 부드러운 스크롤을 위해 CSS를 사용하는 방법을 살펴보겠습니다.

부드러운 스크롤을 위한 CSS가 필요한 이유는 무엇입니까?

CSS는 부드러운 스크롤을 달성하는 가장 간단하고 가장 선호되는 방법입니다. 추가 JavaScript가 로드되지 않아 페이지 성능이 효율적이므로 더 빠르고 가벼워집니다. 계속해서 이를 우리 프로젝트에 구현해 보겠습니다.

1단계: 탐색 표시줄 만들기

먼저 탐색 링크를 포함하는 간단한 탐색 모음을 만들어 보겠습니다. 이 링크는 사용자를 페이지의 특정 섹션으로 안내합니다.

탐색 링크가 페이지의 특정 섹션으로 쉽게 이동할 수 있도록 앵커 태그인지 확인하세요.

2단계: 섹션 생성
이제 탐색 링크가 있으므로 해당 섹션을 만들어 보겠습니다.

각 탐색 링크에 대한 섹션을 만들었습니다.

3단계: 스크롤 가능한 콘텐츠 추가
원활한 스크롤이 작동하려면 페이지에 스크롤할 수 있는 충분한 콘텐츠가 필요합니다. 페이지를 스크롤할 수 있도록 더미 텍스트를 추가해 보겠습니다.

마지막으로 페이지를 스크롤할 수 있을 만큼 충분한 콘텐츠가 생겼습니다.

4단계: 섹션에 탐색 연결
앵커 태그의 href 속성을 사용하여 스크롤하려는 섹션을 참조합니다. # 뒤에 해당 섹션 ID를 추가하면 됩니다.

그래서 위 이미지에서 기본적으로 수행하는 작업은 href 속성을 사용하여 탐색 링크가 이동할 섹션을 참조하는 것입니다.

5단계: 적절한 섹션에 적절한 식별자(id) 할당

이제 우리가 한 일은 href 속성과 ID를 사용하여 각 링크를 적절한 섹션에 할당하는 것입니다. 따라서 #section-one의 href가 있는 탐색 링크는 id section-one

이제 탐색 링크를 클릭하면 해당 섹션으로 이동됩니다.
하지만 우리가 발견한 점은 매끄럽지 않고 페이지가 좋지 않은 경험이 아닌 섹션으로 이동한다는 것입니다.

6단계: CSS로 부드러운 스크롤 추가
부드러운 스크롤을 활성화하려면 html 요소에 단일 CSS 속성을 추가하세요.

html에 스크롤 동작 속성을 추가하면 탐색 링크를 클릭할 때 부드러운 스크롤 효과를 확인할 수 있습니다.

작동 방식

내부적으로 앵커 태그의 href 속성은 일반적으로 외부 페이지나 URL을 탐색하는 데 사용됩니다. 그러나 #과 섹션 ID가 함께 사용되면 앵커 태그는 현재 페이지 내에서 "검색"하여 해당 섹션으로 스크롤합니다. 스크롤 동작을 추가하면 다음과 같습니다. CSS 속성을 사용하여 섹션 간 유동적인 전환을 생성하여 전반적인 사용자 경험을 향상합니다.

부드러운 스크롤을 달성할 수 있는 다른 방법은 JAVASCRIPT를 사용하여 처리하는 것입니다.
또한 다음과 같은 몇 단계만으로 이를 달성할 수 있습니다.

주의: 각 섹션에는 여전히 이전과 같이 할당된 ID가 있습니다.

1단계: scrollIntoView 함수 생성

동일한 결과를 얻기 위해 scrollIntoView 메소드를 사용하는 함수를 자바스크립트로 생성할 수 있습니다. 다음과 같습니다:

2단계: 링크 클릭 시 기능 삽입

각 탐색 링크에 연결된 이벤트 리스너 내에 scrollIntoView 함수를 포함합니다. 이렇게 하면 링크를 클릭하면 페이지가 참조된 섹션으로 부드럽게 스크롤됩니다.

개발에 사용하는 프레임워크에 따라 리팩터링될 수도 있습니다.

이것은 직관적인 웹페이지를 구축할 때 부드러운 스크롤을 달성할 수 있는 두 가지 간단한 방법입니다.

질문이나 의견이 있으면 댓글을 남겨주세요.