2022년 최고의 무료 WordPress 부드러운 스크롤 플러그인

웹 사이트를 만들었지만 웹 사이트의 내용이 너무 길어 이 상황에서 이해하기 어려운 경우 WordPress Smooth Scroll Plugins를 사용할 수 있습니다.

WordPress Smooth 스크롤 플러그인을 사용하면 웹사이트를 위아래로 매우 매끄럽게 스크롤할 수 있습니다. 웹사이트 사용자 경험을 향상시킬 뿐만 아니라 전환율에도 큰 영향을 미칩니다. 귀하의 사용자가 귀하의 웹사이트에 더 오랫동안 참여할 것이기 때문입니다.

jQuery를 사용하여 WordPress의 상단 효과에 부드러운 스크롤을 추가하는 방법은 무엇입니까?

다른 다양한 웹사이트에서 페이지 상단으로 부드럽게 스크롤되는 효과가 있는 이유가 궁금하십니까? 페이지가 긴 경우 부드러운 스크롤 상단 효과를 추가하는 데 이상적입니다.

이는 페이지에서 사용자의 경험을 개선하는 데 도움이 되며 동시에 사용자가 빠르게 맨 위로 돌아갈 수 있도록 합니다.

이제 질문은 WordPress 사이트의 상단 효과에 부드러운 스크롤을 어떻게 추가합니까? 글쎄요, jQuery를 사용하면 쉽게 할 수 있습니다. 여기서는 jQuery를 사용하여 쉽게 할 수 있는 방법에 대해 이야기할 것입니다. 읽어:

Smooth Scroll이란 무엇이며 언제 사용합니까?

페이지나 게시물에 많은 콘텐츠가 있는 경우 사용자는 스크롤하여 모두 읽어야 합니다. 사용자가 아래로 스크롤하기 시작하면 탐색 링크가 올라가기 시작합니다.

사용자가 읽기를 마치면 스크롤하여 남아 있는 것이 있는지 확인해야 합니다. 상단 버튼으로 스크롤하면 독자가 빠르게 작업할 수 있습니다. jQuery를 사용할 필요 없이 이 텍스트 링크를 추가하도록 선택할 수 있습니다.

 <a href="#" title="맨 위로 돌아가기">^맨 위로</a>

몇 초 안에 위로 스크롤하면서 독자를 페이지 상단으로 보낼 것입니다. 기능적으로 작동합니다.

그러나 부드러운 스크롤은 이와 반대입니다. 부드러운 스크롤은 사용자가 페이지의 상단 영역으로 다시 슬라이드하는 데 도움이 됩니다. 이는 사이트 사용자의 경험을 개선하는 데 도움이 됩니다.

WordPress에서 jQuery를 사용하여 상단 효과에 부드러운 스크롤을 추가하시겠습니까?

상단 효과에 부드러운 스크롤을 추가하려면 jQuery를 사용할 수 있습니다. 동시에 WordPress 테마의 HTML 코드에 대한 한 줄과 함께 일부 CSS를 추가해야 합니다.

처음에는 메모장과 같은 텍스트 편집기를 열어야 합니다. 이제 파일을 만들고 계속해서 smoothscroll.js로 저장해야 합니다. 이제 파일 영역에 코드를 복사하여 붙여넣어야 합니다.

jQuery(문서).ready(함수($){
$(창).scroll(함수(){
if ($(this).scrollTop() < 200) {
$('#smoothup') .fadeOut();
} 
또 다른 {
$('#smoothup') .fadeIn();
}
});
   $('#smoothup').on('클릭', function(){
$('html, body').animate({scrollTop:0}, '빠른');
거짓을 반환합니다.
});
});

이제 파일을 저장해야 합니다. 그런 다음 WordPress 테마 디렉토리의 /js /folder에 업로드할 수 있습니다. 테마에 / js/ 디렉토리가 없는 경우 먼저 생성부터 시작해야 합니다.

그런 다음 이 디렉토리에 smoothscroll.js를 업로드할 수 있습니다. 이 코드를 jQuery 스크립트라고 하며 버튼에 부드러운 스크롤 효과를 추가합니다. 기본적으로 사용자가 페이지 상단으로 원활하게 이동할 수 있도록 도와줍니다.

그런 다음 이 smoothscroll.js를 테마 영역에 추가해야 합니다. 그렇게 하려면 WordPress에 스크립트를 추가해야 합니다. 다음은 테마의 functions.php 파일에 붙여넣어야 하는 스크립트 또는 코드입니다.

wp_enqueue_script('부드러움', get_template_directory_uri() . '/js/smoothscroll.js', array('jquery' ), ”, true );
이 코드는 WordPress 명령을 스크립트로 보냅니다. 동시에 플러그인이 종속되어 있으므로 WordPress에 jQuery 라이브러리를 로드하도록 지시합니다.

jQuery 부분 추가가 완료되었으므로 이제 워드프레스 사이트에 대한 실제 링크를 추가해야 합니다. 그러면 사용자가 맨 위 영역으로 돌아갑니다. 테마의 footer.php 파일 아무 곳에나 HTML 코드를 붙여넣어야 합니다.

 <a href="#top" title="맨 위로 돌아가기"></a>

이 단계에는 파일에 대한 링크 추가가 포함되지만 텍스트와 연결되어 있지는 않습니다. 위로 가기 버튼을 표시할 수 있도록 하는 위쪽 화살표에 이미지 아이콘을 사용해야 하기 때문입니다.
테마의 스타일시트에 40x40px 아이콘을 추가하는 방법은 다음과 같습니다.

#스무딩 { 
높이: 40px; 
너비: 40px; 
위치: 고정;
하단:50px;
오른쪽:100px;
텍스트 들여쓰기:-9999px;
디스플레이:없음;
배경: url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); 
-웹킷-전환-시간: 0.4초; 
-moz-전환-시간: 0.4초; 전환 지속 시간: 0.4초; 
}
 
#smoothup:호버 {
-webkit-transform: 회전(360deg) }
배경: url('') 반복 없음;
}

위에서 언급한 CSS에서 이미지 아이콘의 위치를 ​​고정하도록 선택했습니다. 이미지 아이콘을 배경 이미지로 사용하는 것도 포함됩니다. 이제 WordPress 미디어 업로더를 사용하여 이미지 아이콘을 업로드해야 합니다.

그런 다음 배경 URL로 붙여넣어야 하는 이미지 URL을 얻을 수 있습니다. 버튼을 계속 회전시키는 CSS 애니메이션을 버튼에 추가했으므로 사용자는 버튼 위에 마우스 포인터를 둡니다.

이제 상단 효과로 스크롤해야 합니다. 그러면 사용자가 상단 영역으로 돌아가 웹사이트에서 할 수 있는 다른 작업을 찾을 수 있습니다.

또한 부동 바닥글을 다시 추가하여 기능 콘텐츠를 쉽게 표시할 수 있습니다. 사용자가 기사를 공유하기 위해 상단 영역으로 스크롤하는 것을 원하지 않는 경우 플로팅 소셜 공유 바 플러그인을 사용하여 훨씬 더 관리하기 쉽게 만들 수 있습니다.

2022년의 부드러운 스크롤 플러그인 – 매우 가볍고 빠름

WordPress Smooth Scroll Plugins는 다른 모든 장치와 브라우저에서 어려움 없이 훨씬 빠르고 효과적으로 작동합니다.

또한 Yoast SEO, Contact Form 7, NextGen Gallery, Slider Revolution, WooCommerce, SKT 페이지 빌더, Visual Composer 및 Elementor 등과 같은 다른 플러그인과도 훌륭하게 작동합니다.

블로그, 포트폴리오 웹 사이트, 컨설팅 웹 사이트, 기업 웹 사이트, 전자 상거래 관련 웹 사이트, 크리에이티브 에이전시, 부동산 웹 사이트, 개인 이력서, 소매 회사 웹 사이트 등과 같은 대규모 비즈니스 또는 소규모 비즈니스 웹 사이트. WordPress Smooth Scroll Plugin을 사용하여 향상시킬 수 있습니다. 웹사이트의 모양과 느낌.

많은 무료 WordPress 스크롤 플러그인을 사용할 수 있지만 모든 방문자가 좋아할 대부분의 부드러운 스크롤 플러그인을 강조했습니다. 아래에서 확인하시기 바랍니다.

1. id로 페이지 스크롤:

Page scroll to id는 완전히 특성화되고 잘 개발된 기능과 함께 제공되는 오픈 소스 소프트웨어입니다. 부드러운 스크롤 애니메이션 효과를 제공합니다.
id 플러그인으로 페이지 스크롤을 조정할 수 있습니다. 언급된 id 및 offset의 도움으로 이 플러그인은 페이지 크기를 계산하고 자동으로 설정합니다.

2. 스크롤에 고정 메뉴(또는 무엇이든!):

스크롤 플러그인의 고정 메뉴(또는 무엇이든)는 무료로 사용할 수 있습니다. 메뉴나 요소를 끈적하게 만드는 데 도움이 됩니다. 고정 요소를 클릭하면 페이지 상단으로 직접 스크롤됩니다. 고정하려는 올바른 요소를 제거하려면 HTML/CSS에 대한 몇 가지 또는 기본 지식만 있으면 됩니다.

3. WordPress 무한 스크롤 – Ajax 추가 로드:

Ajax Load more는 WordPress 사용자가 웹사이트를 원활하게 스크롤할 수 있도록 특별히 제작되었습니다. Ajax load more는 게으른 게시물, 단일 게시물, 페이지 및 댓글을 로드하는 데 도움이 됩니다. 이 플러그인은 WooCommerce와 같은 전자 상거래 플러그인으로 가장 잘 알려져 있습니다.

4. 쉬운 부드러운 스크롤 링크:

하향식 피쳐를 직접 생성할 수 있습니다. SEasy Smooth Scroll Links는 사용자 정의가 가능하고 매우 가벼운 플러그인이기 때문입니다.

스크롤 업 요소를 설정하려면 이미지 중 하나를 선택하기만 하면 됩니다. 또한 요소의 위치를 ​​왼쪽, 가운데, 오른쪽으로 조정할 수 있습니다. 이 플러그인은 또한 오픈 소스 소프트웨어입니다.

5. MouseWheel 부드러운 스크롤:

MouseWheel Smooth Scroll 플러그인은 모든 앵커 링크를 스크롤하는 데 매우 부드럽습니다. 일반적으로 페이지를 아래에서 위로 스크롤하는 오른쪽에 배치됩니다.

따라서 이 플러그인은 RTL을 지원하며 WordPress 대시보드에서 쓸모없는 메뉴 항목을 생성하지 않습니다.

6. WPOS의 부드러운 스크롤:

WPOS 플러그인의 Smooth Scroll은 가벼우므로 모든 페이지에서 위에서 아래로 스크롤을 쉽게 사용자 지정할 수 있습니다. 단 한 줄의 코드도 작성할 필요가 없습니다.

필요에 따라 애니메이션 속도, 유형, 높이, 너비 등을 조정할 수 있습니다. 이 플러그인은 Elementor 페이지 빌더에서 더 잘 작동합니다.

7. 상단 버튼으로 간단한 스크롤:

앵커 링크에 부드러운 스크롤 효과를 추가할 수 있지만 동일한 페이지에 있습니다. 이 효과는 전체 게시물 및 페이지 또는 특정 게시물 및 페이지에 적용할 수 있습니다. 이 설정은 대시보드 설정 >> Simple Scroll to Top Button에서 찾을 수 있습니다.

– 모든 게시물 및 페이지에 적용 선택
– 홈페이지만 선택
– 특정 페이지만 선택
– 특정 게시물만 선택
- 스크롤의 속도를 결정

8. NS Smooth 맨 위로 스크롤:

Surbma에는 더 많은 활성 사용자가 있습니다. 이 플러그인은 또한 부드러운 스크롤입니다. 웹사이트의 모든 앵커 링크에 효과를 적용할 수 있습니다. 부드러운 스크롤 효과는 메뉴 또는 탐색 부분에 추가할 수 있습니다.

이 플러그인에 대한 옵션이 제공되지 않기 때문에 사용자 정의할 필요조차 없습니다. JavaScript 및 WordPress 프로그래밍에 대한 지식과 경험이 있는 경우 필요에 따라 일부를 변경할 수 있습니다. 그러나 당신이 그것을 가지고 있지 않다면 나는 당신이 그것을 만지지 말라고 제안할 것입니다. 설치 후 즉시 작동을 시작하기 때문입니다.

9. WPFront 스크롤 탑:

WPFront Scroll Top Plugin을 사용하여 아래에서 위로 쉽게 스크롤할 수 있습니다. 선택할 수있는 다양한 옵션으로 완전히 사용자 정의 할 수 있습니다. 일부 애니메이션을 사용하면 위로 스크롤됩니다.
텍스트, 이미지 및 버튼을 직접 만들 수 있습니다. 또한 페이지와 게시물을 필터링할 수 있습니다.

10. 무한 스크롤 캐치:

Catch Infinite scroll은 웹사이트에서 사용자 참여를 높이는 데 도움이 됩니다. 그 배후의 주된 이유는 Jetpack 무한 스크롤입니다. 플러그인이 설치되고 활성화되면 고객과 사용자가 웹사이트 페이지를 스크롤할 수 있습니다.

이들은 모두 2022년 최고의 무료 WordPress Smooth Scroll 플러그인입니다.