[HTML] 한페이지 안에서 지정된 위치로 스크롤하기

Narcoker·2023년 6월 1일
0

HTML

목록 보기
3/7

방법

<a href="#앵커 이름" target="탭 구분" title="툴팁"> </a>
<태그 id="앵커 이름"> </태크>

위 구조로 작성 시 a 태그 클릭시 해당 태그 상단 부분으로 스크롤 된다.
#의 의미는 현재 문서를 의미한다.
#앵커 이름은 현재 문서에 앵커 이름을 가진 id를 찾는다는 의미이다.

href=# 일 경우 현재 문서의 최상단을 의미한다.

부드럽게 스크롤하기

CSS

스크롤 속도 지정 불가능

html {
	scroll-behavior: smooth;
}

JQUERY

스크롤 속도 지정 가능
인터넷 익스플로어 사용 불가능

<script>
    $("선택자1, 선택자2, 선택자3").click(function () {
    $.scrollTo(
        this.hash || 0, 900); /* 900은 스크롤되는 속도(밀리세컨드) 이다. */
    e.preventDefault();
    });
</script>
profile
열정, 끈기, 집념의 Frontend Developer

0개의 댓글