워드프레스 페이지 스크롤 플러그인 Page scroll to id

아래 영상과 같이 페이지 내의 특정 섹션으로 이동하도록 구성하고 링크를 클릭했을 때 부드럽게 이동하도록 하고 싶은 경우가 있습니다. 워드프레스의 경우 일부 테마에서는 스무드 스크롤링 기능을 테마에서 제공하지만, 부드럽게 스크롤하는 기능을 제공하지 않으면 플러그인을 사용할 수 있습니다.

위의 영상에서는 Page scroll to id라는 워드프레스 플러그인을 사용했을 때 섹션 간에 부드럽게 이동하는 것을 보여줍니다. 원페이지 내에서뿐만 아니라 다른 페이지의 특정 섹션(CSS ID가 지정된 섹션)으로도 부드럽게 스크롤됩니다.

참고로 크롬 브라우저에 자체적으로 Smooth Scrolling 기능이 탑재되어 있기 때문에 이 기능을 활성화하지 않아도 부드럽게 이동이 될 수 있습니다. (이 때문에 인기 매거진 테마인 뉴스페이퍼에서는 Smooth Scroll 옵션이 제거되었습니다.)

워드프레스 스무드 스크롤 기능

아바다 등 일부 테마에서는 스무드 스크롤 옵션을 제공하여 CSS ID로 지정된 섹션으로 부드럽게 이동하도록 설정할 수 있습니다. 예를 들어, Avada 테마에서는 워드프레스 관리자 페이지에서 Avada > Theme Options (테마 옵션) > Advanced (고급) > Theme Features에서 Smooth Scrolling (스무드 스크롤링) 기능을 설정할 수 있습니다.

워드프레스 아바다 테마의 스무드 스크롤 기능

다른 페이지 내의 섹션으로 이동해야 하는 경우 이 기능을 활성화했을 때와 비활성화했을 때의 차이를 비교해보면 좋을 듯합니다. 아바다 테마에서는 Smooth Scrolling 기능을 비활성화해도 다른 페이지 내의 섹션으로 부드럽게 이동했지만 다른 테마에서 테스트해보니 스무드 스크롤링 기능이 작동하지 않았습니다. 그런 경우 이 글에서 소개하는 플러그인을 사용하여 테스트해볼 수 있을 것입니다.

엘리멘터 / 블록 에디터(구텐베르크)에서 HTML 앵커 추가하기

페이지 내의 특정 섹션으로 이동하도록 링크를 설정하려면 해당 섹션에 CSS ID를 지정해야 합니다. 엘리멘터와 같은 페이지 빌더에서는 각 섹션에 CSS ID를 추가할 수 있는 옵션을 제공합니다.

무료 페이지 빌더인 Elementor에서는 섹션 편집 화면에서 고급 (Advanced)으로 이동하여 CSS ID를 지정할 수 있습니다.

엘리멘터 페이지 빌더에 CSS ID 추가하는 방법

워드프레스 기본 편집기인 블록 에디터(구텐베르크)에서는 헤딩 블록에 대해서만 CSS ID를 지정할 수 있습니다.

동일 페이지 내에서 특정 ID로 된 섹션으로 링크를 걸려면 #anchor_link 형식으로 링크를 추가하면 됩니다.

워드프레스 블록 에디터에 앵커 링크 추가하기

그리고 앵커 링크를 클릭했을 때 이동할 섹션에 CSS ID를 추가하도록 하도록 합니다. 블록 에디터에서는 헤딩 요소 블록의 HTML anchor 부분에 HTML 앵커(CSS ID)를 지정할 수 있습니다.

워드프레스 구텐베르크 편집기에 HTML 앵커 추가하기

워드프레스 페이지 스크롤 플러그인 Page scroll to id

워드프레스 ID로 페이지 스크롤 플러그인 Page scroll to id

Page scroll to id는 #이 포함된 href 값을 가진 링크를 클릭할 때 브라우저의 이동(jumping) 동작을 부드러운 스크롤링 애니메이션으로 대체하는 무료 워드프레스 플러그인입니다. 이 플러그인은 단일 페이지 웹사이트 (원페이지 사이트), 페이지 내 내비게이션, 위로 이동(back-to-top) 링크 등에 대하여 모든 기본적인 툴과 고급 기능을 제공합니다.

  • 조정 가능한 스크롤링 애니메이션 지속 시간 및 감속/가속(easing) (30가지 이상의 easing 타입)
  • 즉시 사용 가능한 CSS 클래스를 통해 링크 및 타겟 강조 표시(highlighting)
  • 세로 및/또는 가로 스크롤링
  • 다른 페이지 간 스크롤링 (페이지 로드 시 타겟 ID로 스크롤링)
  • 커스텀 표현식으로 픽셀 또는 요소 선택자로 스크롤링 오프셋
  • 글 시간 편집기에서 링크 및 타겟 ID 삽입 버튼
  • 링크별 오프셋, 스크롤 지속시간, 대상 강조 등

Page scroll to id 플러그인을 사용하려면 워드프레스 버전 3.3 이상 (jQuery 버전 1.7.0 이상)이 필요하고 테마에 wp_head() 및 wp_footer() 함수가 있어야 합니다.

이 플러그인은 10만 개 이상 사이트에 설치되어 사용되고 있고 사용자 평가도 비교적 좋은 편입니다. 하지만 jQuery를 사용하는 플러그인은 사이트 속도에 부정적인 영향을 미칠 수 있습니다. 이 플러그인을 사용하려는 경우 활성화한 후에 사이트 속도에 영향을 미치는지 확인해보시기 바랍니다. 참고로 Smooth Scroll for WordPress와 같은 플러그인은 jQuery를 사용하지 않고 네이티브 자바스크립트(Javascript)로 되어 있어 인기 있는 라이브러리에 비해 훨씬 속도가 빠르다고 합니다.

참고

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

2개 댓글

댓글 남기기

* 이메일 주소는 공개되지 않습니다.