jQuery를 사용하여 WordPress의 상단 효과에 부드러운 스크롤을 추가하는 방법

게시 됨: 2022-08-12

WordPress 웹 사이트의 페이지 효과 상단에 부드러운 스크롤을 추가하시겠습니까?

맨 위로 스크롤 효과는 페이지가 길고 사용자가 맨 위로 쉽게 돌아갈 수 있는 방법을 제공하려는 경우에 좋습니다. 웹사이트의 사용자 경험을 개선하는 데 도움이 됩니다.

이 기사에서는 jQuery와 플러그인을 사용하여 WordPress에 부드러운 스크롤 효과를 추가하는 방법을 보여줍니다.

How to scroll to top effect using jQuery

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

사이트에 고정 헤더 메뉴가 없는 한 긴 WordPress 페이지 또는 게시물의 맨 아래로 스크롤하는 사용자는 사이트를 탐색하기 위해 수동으로 스와이프하거나 맨 위로 스크롤해야 합니다.

그것은 정말 성가신 일이며 종종 사용자는 단순히 뒤로 버튼을 누르고 떠날 것입니다. 그렇기 때문에 사용자를 페이지 상단으로 빠르게 보낼 수 있는 버튼이 필요합니다.

다음과 같이 jQuery를 사용하지 않고 이 기능을 간단한 텍스트 링크로 추가할 수 있습니다. 

<a href="#" title="Back to top">^Top</a>

그러면 밀리초 내에 전체 페이지를 위로 스크롤하여 사용자를 맨 위로 보냅니다. 효과가 있지만, 도로에서 충돌할 때와 같이 효과가 거슬릴 수 있습니다.

부드러운 스크롤은 그 반대입니다. 그것은 시각적으로 즐거운 효과와 함께 사용자를 다시 위로 밀어줄 것입니다. 이와 같은 요소를 사용하면 사이트의 사용자 경험을 크게 개선할 수 있습니다.

즉, WordPress 플러그인과 jQuery를 사용하여 부드러운 스크롤을 상단 효과에 추가하는 방법을 살펴보겠습니다.

WordPress 플러그인을 사용하여 부드러운 위로 스크롤 효과를 추가하는 방법

이 방법은 코드 한 줄을 건드리지 않고도 워드프레스 웹사이트에 맨 위로 스크롤 효과를 추가할 수 있으므로 초보자에게 권장됩니다.

가장 먼저 해야 할 일은 WPFront Scroll Top 플러그인을 설치하고 활성화하는 것입니다. 도움이 필요하면 WordPress 플러그인 설치 방법에 대한 가이드를 참조하세요.

활성화되면 WordPress 대시보드에서 설정 » 스크롤 맨 위로 이동할 수 있습니다. 여기에서 플러그인을 구성하고 부드러운 스크롤 효과를 사용자 지정할 수 있습니다.

먼저 사이트에서 맨 위로 스크롤 버튼을 활성화하려면 '사용' 확인란을 클릭해야 합니다. 다음으로 스크롤 오프셋, 버튼 크기, 불투명도, 페이드 지속 시간, 스크롤 지속 시간 등을 편집하는 옵션이 표시됩니다.

Edit WPfront scroll top settings

아래로 스크롤하면 자동 숨기기 시간 편집, 소형 장치에서 버튼 숨기기 옵션 활성화, wp-admin 화면에서 숨기기 등의 더 많은 옵션을 찾을 수 있습니다.

버튼을 클릭할 때 버튼의 기능을 편집할 수도 있습니다. 기본적으로 페이지 상단으로 스크롤되지만 게시물의 특정 요소로 스크롤하거나 페이지로 연결되도록 변경할 수도 있습니다.

버튼의 위치를 ​​변경하는 옵션도 있습니다. 기본적으로 화면의 오른쪽 하단 모서리에 표시되지만 다른 모서리로 이동하도록 선택할 수도 있습니다.

More edit WPfront scroll top settings

WPFront Scroll Top 플러그인은 또한 선택한 페이지에서만 위로 스크롤 버튼을 표시하는 필터를 제공합니다.

일반적으로 WordPress 블로그의 모든 페이지에 나타납니다. 그러나 '페이지에 표시' 섹션으로 이동하여 상단 효과까지 스크롤을 표시할 위치를 선택할 수 있습니다.

Choose where to display the effect

플러그인은 또한 선택할 수 있는 사전 제작된 버튼 디자인을 제공합니다. 귀하의 사이트와 일치하는 디자인을 쉽게 찾을 수 있어야 합니다.

자신에게 맞는 사전 제작된 이미지 버튼을 찾을 수 없다면 WordPress 미디어 라이브러리에서 사용자 지정 이미지를 업로드하는 옵션이 있습니다.

Choose an image button

완료되면 '변경 사항 저장' 버튼을 클릭하기만 하면 됩니다.

이제 웹 사이트를 방문하여 맨 위로 스크롤 버튼이 작동하는 것을 볼 수 있습니다.

Scroll to top button preview

WordPress에서 jQuery를 사용하여 상단 효과에 부드러운 스크롤 추가

이 방법은 초보자에게 권장되지 않습니다. 웹 사이트에 코드를 추가하는 기능이 포함되어 있기 때문에 테마 편집에 익숙한 사람들에게 적합합니다.

WordPress 테마에서 jQuery, 일부 CSS 및 HTML 코드 한 줄을 사용하여 부드러운 스크롤 상단 효과를 추가합니다.

먼저 메모장과 같은 텍스트 편집기를 열고 파일을 만듭니다. 계속해서 smoothscroll.js 로 저장합니다.

다음으로 이 코드를 복사하여 파일에 붙여넣어야 합니다. 

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 'fast');
		return false;
		});
});

그런 다음 파일을 저장하고 WordPress 테마 디렉토리의 /js/ 폴더에 업로드할 수 있습니다. 자세한 내용은 FTP를 사용하여 WordPress에 파일을 업로드하는 방법에 대한 가이드를 참조하세요.

테마에 /js/ 디렉토리가 없으면 하나 만들고 smoothscroll.js 를 업로드할 수 있습니다. 자세한 내용은 WordPress 파일 및 디렉토리 구조에 대한 가이드를 참조하십시오.

이 코드는 사용자를 페이지 맨 위로 이동시키는 버튼에 부드러운 스크롤 효과를 추가하는 jQuery 스크립트입니다.

다음으로 해야 할 일은 테마에 smoothscroll.js 파일을 로드하는 것입니다. 이를 위해 WordPress에 스크립트를 대기열에 추가합니다.

그런 다음 이 코드를 복사하여 테마의 functions.php 파일에 붙여넣기만 하면 됩니다. 사소한 실수로 사이트가 손상될 수 있으므로 테마 파일을 직접 편집하지 않는 것이 좋습니다. 대신 WPCode와 같은 플러그인을 사용하고 WordPress에서 사용자 지정 코드 조각을 추가하는 방법에 대한 자습서를 따를 수 있습니다. 

wp_enqueue_script( 'smoothup', get_template_directory_uri() . 'https://cdn2.wpbeginner.com/js/smoothscroll.js', array( 'jquery' ), '',  true );

위의 코드에서 WordPress에 스크립트를 로드하고 플러그인이 종속되기 때문에 jQuery 라이브러리도 로드하도록 지시했습니다.

이제 jQuery 부분을 추가했으므로 사용자를 맨 위로 이동시키는 WordPress 사이트에 대한 실제 링크를 추가해 보겠습니다. 이 HTML을 테마의 footer.php 파일 아무 곳에나 붙여넣기만 하면 됩니다. 도움이 필요하면 WordPress에 머리글 및 바닥글 코드를 추가하는 방법에 대한 자습서를 참조하세요. 

<a href="#top" id="smoothup" title="Back to top"></a>

HTML 코드에 링크가 포함되어 있지만 앵커 텍스트가 없다는 것을 눈치채셨을 것입니다. 위쪽 화살표가 있는 이미지 아이콘을 사용하여 위로 가기 버튼을 표시하기 때문입니다.

이 예에서는 40x40px 아이콘을 사용하고 있습니다. 테마의 스타일시트에 아래의 사용자 정의 CSS를 추가하기만 하면 됩니다.

이 코드에서는 이미지 아이콘을 버튼의 배경 이미지로 사용하고 고정된 위치에 설정합니다. 또한 사용자가 버튼 위로 마우스를 가져갈 때 버튼을 회전시키는 작은 CSS 애니메이션을 추가했습니다. 

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}

#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

위의 CSS에서 https://www.example.com/wp-content/uploads/2013/07/top_icon.png 를 사용하려는 이미지 URL로 바꿔야 합니다. WordPress 미디어 업로더를 사용하여 자신의 이미지 아이콘을 업로드하고 이미지 URL을 복사한 다음 코드에 붙여넣을 수 있습니다.

이 기사가 jQuery를 사용하여 사이트의 상단 효과에 부드러운 스크롤을 추가하는 데 도움이 되었기를 바랍니다. 또한 소규모 비즈니스를 위한 최고의 WordPress 플러그인에 대한 전문가 선택과 온라인 상점 시작 방법에 대한 단계별 가이드를 보고 싶을 수도 있습니다.

이 기사가 마음에 들면 WordPress 비디오 자습서용 YouTube 채널을 구독하십시오. Twitter와 Facebook에서도 찾을 수 있습니다.