[javaScript] 스크롤 여부에 따른 버튼영역 하단에 붙이기!!

 

안녕하세요!

웹사이트를 제작할 때, 스크롤 여부에 따라 버튼 영역을 푸터 하단 쪽에 붙이는 기능이 필요할 때가 종종 있습니다.

다른 작업에서도 이와 같은 유사한 기능을 작업 할 수 있기 때문에 히스토리 차원으로 코드 남깁니다!!

유사한 작업을 하시는 분들께 도움이 되었으면 합니다~

 

💡html과 css 코드는 동일!

💡jQuery로 구현한 경우와 javaScript로 구현한 경우!

 

 

1) 제이쿼리로 구현한 코드

1-1) 브라우저 화면보다 컨텐츠 내용이 짧아, 스크롤 발생 안 한 경우

See the Pen 스크롤 여부에 따른 버튼 하단에 붙이기_스크롤발생X(제이쿼리) by yeony1 (@yeony1) on CodePen.

 

1-2) 브라우저 화면보다 컨텐츠 내용이 길어, 스크롤 발생했을 경우

See the Pen 스크롤 여부에 따른 버튼 하단에 붙이기_스크롤발생O(제이쿼리) by yeony1 (@yeony1) on CodePen.

 

 

2) 자바스크립트로 구현한 코드

2-1) 브라우저 화면보다 컨텐츠 내용이 짧아, 스크롤 발생 안 한 경우

See the Pen 스크롤 여부에 따른 버튼 하단에 붙이기_스크롤발생X(제이쿼리) by yeony1 (@yeony1) on CodePen.

 

2-2) 브라우저 화면보다 컨텐츠 내용이 길어, 스크롤 발생했을 경우

See the Pen 스크롤 여부에 따른 버튼 하단에 붙이기_스크롤발생O(자바스크립트) by yeony1 (@yeony1) on CodePen.

 

 

[유사 변형 가능한 기능]

- 스크롤 위치에 따른 Top버튼 show/hide

- 스크롤 위치에 따른 Header fixed

- 스크롤 위치에 따른 버튼영역 푸터 show/hide

 

 

생각보다 다양한 곳에서 scrollTop의 위치로 이와 같은 기능 구현이 가능합니다!

 

유익하셨다면,

채널 추가 / 블로그 구독 / 공감 부탁드려요 🙏