<a>태그를 통해 페이지 내 스크롤 하여 이동하기

바로가기

<a>를 통한 지정 위치 이동

CSS 스크롤 구현

JQuery 스크롤 구현

 

a태그 스크롤 예제

 

CSS 이용하는 방법과 Jquery를 통해 구현하는 2가지 방법을 소개하겠습니다.

그전에 <a>태그에서 지정 위치로 이동하는 법 부터 알아보겠습니다.

<a>를 통한 지정 위치 이동

<a href="#part1">TITLE</a>	<!-- #<id> : 해당 id를 가진 요소로 이동한다.-->
...
<h1 id="part1">TITLE</h1>

위 코드로 구현시 스크롤 움직임 효과 없이 바로 그 위치로 이동하게 됩니다.

이제 스크롤 이동 구현 방법을 소개하겠습니다.

CSS 스크롤 구현

html {
    scroll-behavior: smooth;	/* 부드로운 스크롤 이동 효과 */
}

html 요소에 해당 속성만 추가하면 끝입니다. 간단하죠?

그러나 IE 지원이 안되고 지정 위치까지 이동시간을 지정할 수는 없습니다. 해당 요소를 고려하지 않으면 CSS로 하는것이 바람직하겠습니다.

 

JQuery 스크롤 구현

<a href="" class="gototop">Go To Top</a>	/* top으로 이동하는 a 태그 */
<a href="#part1">TITLE</a>			/* 지정위치로 이동하는 a태그 */

// a[href^="#"] : href값이 #으로 시작하는 a태그,
// .gototop : class명 "gototop"인 a태그
$('a[href^="#"], .gototop').on('click', function(e) {
    // a태그 기본 이벤트 발생 차단
    e.preventDefault();
    
    // top 위치 설정
    // this.hash : href 값
    // 값이 없는경우 0 -> top 이동
    // 값이 있는경우 해당 id를 가진 요소 top으로 이동
    let nTop = this.hash === "" ? 0 : $(this.hash).offset().top;
	
    // 지정 top 위치로 이동, 이동 시간 : 0.6s
    $('html, body').animate({scrollTop: nTop}, 600);
})

 

JQuery를 이용하면 모든 브라우져에서 사용가능하고 시간 조절도 됩니다.

직접 구현해보시면 더 감이 잘 오실거에요. 어렵지 않으니 실습해보시면 될 것 같습니다.