모달 팝업에서 스크롤 활용하기
개인정보 보호 및 이용약관과 같은 긴 텍스트는 화면 디자인을 깔끔하게 유지하기 위해 모달 팝업 내에서 스크롤을 통해 표시된다. 하지만 모달 팝업의 크기가 제한적이므로, 사용자가 원하는 위치로 보다 편리하게 이동할 수 있도록 스크립트를 이용해 상단, 하단 또는 특정 지점으로 이동할 수 있도록 지원한다.
이 스크립트는 모달 팝업을 열고 닫으며, 사용자가 원하는 위치로 스크롤을 이동할 수 있도록 도와주는 기능을 제공합니다.
1. 모달 팝업 열기 (Open 함수)
Open 함수가 실행되면 .modal_area 클래스를 가진 요소가 100ms 후에 표시됩니다.delay(1000)) .modalpop 요소에 _on 클래스를 추가해 팝업이 활성화됩니다.2. 모달 팝업 닫기 (Close 함수)
Close 함수가 실행되면 .modal_area 요소가 100ms 후에 숨겨집니다..modalpop 요소에서 _on 클래스를 제거해 팝업을 비활성화합니다.3. 스크롤 이동 (Scroll 함수)
사용자가 특정 위치로 이동하도록 스크롤 값을 설정하고 애니메이션 효과를 적용합니다.
스크롤 위치 설정 (switch 문)
top: 스크롤을 최상단(0px) 으로 이동.bottom: scrollHeight - height()을 계산하여 스크롤을 최하단으로 이동.
scrollHeight: 해당 요소의 전체 높이.height(): 현재 보이는 높이.tar)로 이동할 경우:position().top 값에 현재 스크롤 위치(scrollTop()) 를 더해 정확한 위치로 이동.4. 스크롤 애니메이션 적용
scrollTop 값으로 $("._body") 요소가 800ms 동안 부드럽게 이동합니다.
