[HTML/CSS] 클릭 시 페이지 내에 특정 위치로 스크롤 이동

페이지 내에서 특정 위치로 이동하는 방법에 대해 알아보자!

이번에는 자연스럽게 스크롤을 이용하여 이동하는 방법을 알아보려고한다.

참고로 이 방식은 스크롤이 될 내용이 길 수록 눈으로 효과를 확인 할 수 있다.

 

HTML

<div>
  <ul class="list">
    <li><a href="#scroll1" class="scroll_move">scroll1</a><li>
    <li><a href="#scroll2" class="scroll_move">scroll2</a><li>
    <li><a href="#scroll3" class="scroll_move">scroll3</a><li>
    <li><a href="#scroll4" class="scroll_move">scroll4</a><li>
  </ul>
</div>

<div class="listbox">
  <div class="scroll1" id="scroll1">scroll1</div>
  <div class="scroll2" id="scroll2">scroll2</div>
  <div class="scroll3" id="scroll3">scroll3</div>
  <div class="scroll4" id="scroll4">scroll4</div>
</div>

 

CSS

/* reset */
ul, ol, li {list-style-type: none;}
a {color: #333; text-decoration: none;}

.list {position: relative; height: 50px; margin-bottom: 50px;}
.list li {display: inline-block; padding: 0 20px;}
.listbox {margin: 0 auto; text-align: center;}

.scroll1, .scroll2, .scroll3, .scroll4 {width: 100%; height: 380px; margin-bottom: 20px;}
.scroll1 {background-color: red;}
.scroll2 {background-color: blue;}
.scroll3 {background-color: green;}
.scroll4 {background-color: yellow;}

JS

$(document).ready(function($) {
            $(".scroll_move").click(function(event){
                console.log(".scroll_move");         
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
            });

        });

 

VwMzagN