제이쿼리를 이용해 버튼 클릭시
특정위치로 스크롤 이동하는 방법입니다.
- 주로 랜딩페이지 상단 메뉴바에 많이 사용되는 기능합니다.
- 버튼 클릭시 페이지내 특정 위치로 스크롤 이동합니다.
- 아래의 코드를 사용하기 전에 jquery.min 스크립트 파일 <head>태그 내에 삽입합니다.
- easing 효과를 위해 jquery.easing 스크립트 파일을 <head>태그 내에 삽입합니다.
- easing 효과를 원치 않으면 easeInOutExpo 부분만 삭제하면 됩니다.
html
<a class="btn" href="#이동하는 부분 id명"><span>버튼</span></a>
script
//네이게이션 menu click시 easing기능으로 부드럽게 이동
$(".btn").click(function(event){
event.preventDefault(); //이전의 이벤트를 기본값
x = $(this).attr("href");
//해당 href 이동시에 위치가 너무 아래에 있을 경우 - 130 하여 조정
$("html, body").stop().animate({ scrollTop : $(x).offset().top - 130 } , 1000, "easeInOutExpo");
});
css
scroll-behavior: smooth; 를 사용하면 scroll 이동시 부드럽게 움직이는 효과를 구현할 수 있습니다.
html {
scroll-behavior: smooth;
}반응형
'💻CODING > javascript' 카테고리의 다른 글
| [js] 팝업창 오픈 후 배경 스크롤 방지 (0) | 2022.06.23 |
|---|---|
| [js] 천자리 콤마 적용 (천자리 점찍기) (0) | 2022.06.23 |
| [js] 문자열 특정 문자 추출하기 (0) | 2022.05.25 |
| [js] 배열 map으로 object에 key 추가하기, value 추가 (0) | 2022.05.16 |
| [js] 자바스크립트 debugger 활용 (0) | 2022.04.08 |
댓글