웹 | 버튼 클릭시 부드럽게 스크롤 이동
페이지 정보
작성자 김진희 조회23,615회 댓글0건본문
CSS 방법
크로스브라우징 X (즉, IE, Safari 지원 X)
<style>
html {scroll-behavior: smooth; /* 부드러게 */}
#section1 {height: 600px; background-color: pink;}
#section2 {height: 600px; background-color: yellow;}
</style>
<div class="hz" id="section1">
<h2>Section 1</h2>
<a href="#section2">섹션2로 이동</a>
</div>
<div class="hz" id="section2">
<h2>Section 2</h2>
<a href="#section1">섹션1로 이동</a>
</div>
-------------------------------------------------------------------
JQUERY 방법
크로스브라우징 O
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
</script>