TOP 버튼 만들기

TOP 바로가기 버튼 만들기를 오늘 배웠습니다.

구글링하니 많은 소스들이 있네요. 그 중에서 Jquery를 이용한 소스를 알게되었고 그것을 접목해 봤습니다.

https://cofs.tistory.com/188

jquery 를 이용하여 화면 맨위로 자연스럽게 올라가는 TOP 버튼 만들기

위 블로그에서 발취했습니다.

 

 

TOP 버튼이란?

사이트 컨텐츠가 길어지면 스크롤을 아래로 내려야 하고 내리다가 다시 위에 있는 컨텐츠를 보려면 다시 마우스 스크롤업 해야 합니다. 그런데 오늘 제가 접목한 코드는 스크롤을 내리면 어느순간 TOP 버튼(위로 가기 버튼)이 생겨서 TOP 버튼 누르면 제일 윗쪽으로 자연스럽게 스크롤업 되는 편리한 기능 입니다.

 

구글링을 해보니 다양한 방법으로 이 기능을 구현하고 있는데 제가 접목한 것은 오픈 소스인 jquery를 이용한 방법입니다.

 

 

TOP 버튼 소스

아래 소스를 저는 </body> 바로 위에 넣었더니 잘 작동 하네요..

첫번째 줄에 있는 TOP 텍스트 대신에 이미지로 대체해도 됩니다. 하지만 전 그냥 텍스트로 했어요.

 

적용한 페이지: dol.url.kr/room_snap/olivingdeco/index.html

돌 스냅 촬영 패키지-올리빙데코

<!-- TOP BTN[S] -->
	<a id="MOVE_TOP_BTN" href="#">TOP</a>
	<style>
	a#MOVE_TOP_BTN {
		position: fixed;
		right: 2%;
		bottom: 50px;
		display: none;
		z-index: 999;
	}
	</style>
	<script src="//code.jquery.com/jquery.min.js"></script>
	<script>
    $(function() {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 500) {
                $('#MOVE_TOP_BTN').fadeIn();
            } else {
                $('#MOVE_TOP_BTN').fadeOut();
            }
        });
        
        $("#MOVE_TOP_BTN").click(function() {
            $('html, body').animate({
                scrollTop : 0
            }, 400);
            return false;
        });
    });
	</script>
<!-- TOP BTN[E] -->

 

 

마무리

엑셀을 배울때 엑셀책을 무식하게 처음부터 보지 않았습니다.

내가 필요한 기능만 하나하나 익혀 갔습니다. 결국 사용하는 기능은 한정적이니까요.

생활코딩도 마찬가지로 접근하고 있습니다.

내가 필요한 부분만 기록하고 익히고 다음에 다시 접목하고 실력되면 응용하고...

 

오늘 적용한 TOP버튼 기능, 정말 많이 사용합니다. 개발해 주신 원제작자님께 감사 드립니다.