웹페이지 하단에서 상단으로 부드럽게 이동하는 방법 : jQuery

웹페이지 하단에서 상단으로 부드럽게 이동하는 방법 : jQuery

by

웹페이지가 길어지면 상단으로 가기 위해 마우스 스크롤이나 키보드의 pageUp 버튼을 사정없이 눌러야 합니다. 이런 불편함을 jQuery의 animate() 함수로 한방에 해결해 보겠습니다.

먼저 jQuery CDN 사용법을 확인해주세요!

jQuery CDN을 이용한 사용법

기본 사용법

jQuery CDN 연결 먼저 시켜주시고, 버튼을 하나 만들어 줍니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
    <button id="btn-top-move">상단으로 Go!</button>
</body>
</html>

JavaScript 소스 추가

$("#btn-top-move").on("click", function() {
    $("html, body").animate({scrollTop:0}, '500');
    return false;
});
결과보기