안녕하세요. 제임스 입니다.
웹 개발 중 화면상에 스크롤이 생기는 경우가 있습니다.
그리고 특정 상황에 맞춰 스크롤을 최상단 또는 최하단으로 이동 시켜 줘야 하는 경우가 있습니다.
이번 포스팅에서는 jQuery 를 이용하여 스크롤 최상단 또는 최하단으로 이동 처리를 하는 방법에 대해 알아 보겠습니다 .
■ jQuery 를 이용하여 스크롤 최하단 or 최상단 이동하기
상기 이미지와 같이 스크롤이 되도록 처리 해보겠습니다.
▶ HTML body 부
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <body style="padding: 20px;"> <p>※ jQuery 를 이용하여 scroll 처리 하기 </p> <div id="scrollTestDiv" style="margin: 20px; height: 200px; width: 300px; overflow: scroll; background-color: orange;" > <br>--- 애국가 가사 START ---<br><br> <br>동해물과 백두산이 마르고 닳도록<br> <br>하느님이 보우하사 우리나라 만세<br> <br>무궁화 삼천리 화려 강산<br> <br>대한사람 대한으로 길이 보전하세<br> <br><br> <br>남산 위에 저 소나무 철갑을 두른듯<br> <br>바람서리 불변함은 우리 기상일세<br> <br>무궁화 삼천리 화려 강산<br> <br>대한사람 대한으로 길이 보전하세<br> <br><br> <br>가을 하늘 공활한데 높고 구름 없이<br> <br>밝은 달은 우리 가슴 일편단심일세<br> <br>무궁화 삼천리 화려 강산<br> <br>대한사람 대한으로 길이 보전하세<br> <br><br> <br>이 기상과 이 마음으로 충성을 다하여<br> <br>괴로우나 즐거우나 나라사랑하세<br> <br>무궁화 삼천리 화려 강산<br> <br>대한사람 대한으로 길이 보전하세<br> <br>--- 애국가 가사 END ---<br><br> </div> <input type="button" onclick="scrollToBottom();" value="최하단으로 스크롤 하기"> <br><br> <input type="button" onclick="scrollToTop();" value="최상단으로 스크롤 하기"> </body> | cs |
위와 같이 div 안에 애국가 가사를 입력 했습니다.
div 스타일에 height 와 width 를 지정했는데요. height 를 200px 만 지정하여 스크롤바가 생기도록 했습니다.
아래쪽에는 버튼 두개를 만들어 onclick 이벤트 발생 시 scrollToBottom() 함수와 scrollToTop() 함수를 호출 하도록 작성 했습니다.
▶ javascript 함수
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript"> // 텍스트의 최하단으로 scroll 하기 function scrollToBottom() { $('#scrollTestDiv').scrollTop($('#scrollTestDiv')[0].scrollHeight); } // 텍스트의 최상단으로 scroll 하기 function scrollToTop(){ $('#scrollTestDiv').scrollTop(0); } </script> | cs |
HTML body 부에서 설정한 버튼이 호출 하는 함수들을 작성 했습니다.
▼ scrollToBottom() 함수
id 값이 scrollTestDiv 인 요소를 찾아 scrollTop() 한 결과 값으로 이동 합니다.
scrollTop 은 요소의 맨 위에서 보이는 내용까지의 거리를 측정한 값입니다.
만약 스크롤 최상단에 위치한 경우라면 scrollTop() 의 값은 0 입니다.
참조) https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
여기서는 scrollTop() 인자값으로 지정된 id 값의 scrollHeight 는 요소의 모든 컨텐츠가 스크롤 없이 모두 펼쳐져 한눈에 보여지기 위한 높이를 의미 합니다.
쉽게 이야기 하자면 위 예제의 div 높이가 200px 로 고정 되어 있지만 만약 고정되지 않고 스크롤이 없는 상태라면 924 px 로 늘어나게 됩니다. scrollHeight 는 바로 924px 이 되는 겁니다.
참조) https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
▼ scrollToTop() 함수
앞서 언급 했듯이 요소의 최상단에 위치 시키면 되므로 scrollTop(0) 을 하면 됩니다.
▽▽▽ 결과 화면 (테스트 해보세요) ▽▽▽
--- 애국가 가사 START ---
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한사람 대한으로 길이 보전하세
남산 위에 저 소나무 철갑을 두른듯
바람서리 불변함은 우리 기상일세
무궁화 삼천리 화려 강산
대한사람 대한으로 길이 보전하세
가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세
무궁화 삼천리 화려 강산
대한사람 대한으로 길이 보전하세
이 기상과 이 마음으로 충성을 다하여
괴로우나 즐거우나 나라사랑하세
무궁화 삼천리 화려 강산
대한사람 대한으로 길이 보전하세
--- 애국가 가사 END ---
▼ 도움이 되셨다면 로그인이 필요 없는 ▼
▼ 하트 클릭 한번 부탁 드립니다 ▼
감사합니다 :D
'jquery' 카테고리의 다른 글
| jQuery 를 이용하여 id, class, name 의 input value 값 가져오기 (1805) | 2021.06.10 |
|---|---|
| jQuery 를 이용하여 스크롤 애니메이션 처리하기 (491) | 2018.07.24 |
| jquery 로 input 값 금액 포맷 표기하기 (490) | 2018.07.17 |
쉬운코딩이최고
Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.