모달 팝업에서 스크롤 활용하기
개인정보 보호 및 이용약관과 같은 긴 텍스트는 화면 디자인을 깔끔하게 유지하기 위해 모달 팝업 내에서 스크롤을 통해 표시된다. 하지만 모달 팝업의 크기가 제한적이므로, 사용자가 원하는 위치로 보다 편리하게 이동할 수 있도록 스크립트를 이용해 상단, 하단 또는 특정 지점으로 이동할 수 있도록 지원한다.

이 스크립트는 모달 팝업을 열고 닫으며, 사용자가 원하는 위치로 스크롤을 이동할 수 있도록 도와주는 기능을 제공합니다.

1. 모달 팝업 열기 (Open 함수)

• Open 함수가 실행되면 .modal_area 클래스를 가진 요소가 100ms 후에 표시됩니다.
• 1초 후(delay(1000)) .modalpop 요소에 _on 클래스를 추가해 팝업이 활성화됩니다.

2. 모달 팝업 닫기 (Close 함수)

• Close 함수가 실행되면 .modal_area 요소가 100ms 후에 숨겨집니다.
• .modalpop 요소에서 _on 클래스를 제거해 팝업을 비활성화합니다.

3. 스크롤 이동 (Scroll 함수)

사용자가 특정 위치로 이동하도록 스크롤 값을 설정하고 애니메이션 효과를 적용합니다.

스크롤 위치 설정 (switch 문)

• top: 스크롤을 최상단(0px) 으로 이동.
• bottom: scrollHeight - height()을 계산하여 스크롤을 최하단으로 이동.
  • scrollHeight: 해당 요소의 전체 높이.
  • height(): 현재 보이는 높이.
  • 전체 높이에서 현재 보이는 높이를 빼면 스크롤할 수 있는 최대 높이가 됨.
• 특정 ID(tar)로 이동할 경우:

• 해당 ID의 position().top 값에 현재 스크롤 위치(scrollTop()) 를 더해 정확한 위치로 이동.

4. 스크롤 애니메이션 적용

• 설정된 scrollTop 값으로 $("._body") 요소가 800ms 동안 부드럽게 이동합니다.

네이버 MYBOX 파일 공유 :  https://naver.me/5ZSdPFcs