반응형
HTML 텍스트 정렬 및 스타일 CSS
사이트의 메뉴는 보통 맨 위에 있습니다. 내용이 긴 문서를 읽은 후 다시 메뉴로 가려면 한참 스크롤을 해야 하는 불편이 있습니다. 이 불편을 없애기 위해 맨 위로 가는 링크를 제공하는 곳이 많습니다. 단순한 링크로 만들면 순식간에 맨 위로 이동하는데, 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이라는 링크가 생기고, 그 링크를 클릭하면 맨 위로 천천히 올라갑니다.
반응형