jQuery / 맨 위로 부드럽게 이동하는 링크 만들기
사이트의 메뉴는 보통 맨 위에 있습니다. 내용이 긴 문서를 읽은 후 다시 메뉴로 가려면 한참 스크롤을 해야 하는 불편이 있습니다. 이 불편을 없애기 위해 맨 위로 가는 링크를 제공하는 곳이 많습니다. 단순한 링크로 만들면 순식간에 맨 위로 이동하는데, jQuery의 scrollTop()을 이용하면 맨 위로 스르륵 올라가는 효과를 쉽게 만들 수 있습니다.
HTML 문서에 링크를 만듭니다.
<a href="#" class="top">Top</a>
스크롤해도 위치가 변하지 않도록 만들고, 적당히 위치를 잡은 후 보이지 않게 합니다.
a.top { position: fixed; left: 50%; bottom: 50px; display: none; }
어느 정도 스크롤하여 밑으로 내려갔을 때 링크가 보이게 합니다.
$( window ).scroll( function() { if ( $( this ).scrollTop() > 200 ) { $( '.top' ).fadeIn(); } else { $( '.top' ).fadeOut(); } } );
클릭했을 때 스르륵 올라가도록 애니메이션 효과를 줍니다.
$( '.top' ).click( function() { $( 'html, body' ).animate( { scrollTop : 0 }, 400 ); return false; } );
전체 코드는 다음과 같습니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { margin: auto; width: 500px; height: 2000px; border: 1px solid #bcbcbc; } a.top { position: fixed; left: 50%; bottom: 50px; display: none; } </style> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( window ).scroll( function() { if ( $( this ).scrollTop() > 200 ) { $( '.top' ).fadeIn(); } else { $( '.top' ).fadeOut(); } } ); $( '.top' ).click( function() { $( 'html, body' ).animate( { scrollTop : 0 }, 400 ); return false; } ); } ); </script> </head> <body> <div></div> <a href="#" class="top">Top</a> </body> </html>
문서의 밑으로 내려가면 웹브라우저 아래 중간에 Top이라는 링크가 생기고, 그 링크를 클릭하면 맨 위로 천천히 올라갑니다.