728x90 html 스크롤 이동2 [CSS / Javascript] 메뉴 클릭시 화면 스크롤 이동 CSS / Javascript 메뉴 클릭시 화면 스크롤 부드럽게 이동하기 순수 CSS와 순수 자바스크립트만을 사용하여 구현하였다. 버튼은 간단하게 네모 모양으로 구성하였으며, 메뉴 클릭시 화면 스크롤 이동에 대한 로직은 아래 코드에 모두 구현되어있다. 구동 로직 1. 첫 화면에 초록색 동그란 버튼이 생성되는데 클릭시 가장 하단의 태그에 스크롤이 자동으로 이동된다. 2. 스크롤이 일정범위를 지나면 위쪽의 초록색 버튼이 사라지고 하단에서 최상단으로 한번에 이동할수 있는 오렌지색 버튼이 자동으로 생성된다. 3. 오렌지색 동그란 버튼 클릭시 자동으로 화면의 최상단에 있는 태그 위치로 스크롤을 이동시킨다. 샘플 예제 출력 결과 2021. 4. 17. [Javascript] 엘리먼트 위치로 스크롤 이동 scrollIntoView() Javascript 엘리먼트 위치로 스크롤 이동 엘리먼트.scrollIntoView() scrollIntoView()는 보통 메뉴바에서 많이 쓰이는데 싱글페이지 앱에서 메뉴 버튼 클릭시 해당되는 위치로 스크롤이 이동되는 기능을 수행한다. 기본 골격 element.scrollIntoView(); //괄호안에 {behavior : 'smooth'} 코드 추가시 //스크롤 이동이 ease-in-out과 같이 부드러워진다 샘플코드 menu1 menu2 menu3 menu4 출력 결과 2021. 4. 15. 이전 1 다음 728x90
