231009/D+6

jquery - TOP

기능 요약

- 스크롤의 위치에 따라서 맨위로 올라가는 버튼을 나타내거나 사라지도록 한다.

- 맨위로 올라가는 버튼을 클릭하면 자연스럽게 화면 최상단으로 이동한다.

<style>
a#MOVE_TOP_BTN {
    position: fixed;
    right: 2%;
    bottom: 50px;
    display: none;
    z-index: 999;
}
</style>

3# : 화면에 고정

4#, 5# : 버튼의 위치 설정

6# : 화면에서 숨김

7# : 다른 태그들보다 위로 오도록 설정(z-index 가 설정된 다른 태그가 있다면 그 태그보다 커야 함)

 

 

<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>

3# : scroll 함수를 이용

4# ~ 8# : 스크롤 위치에 따라 화면에서 맨위로 올라가는 버튼을 나타내고, 사라지도록 설정

11# : 버튼 클릭 이벤트

12# : animation 을 걸어서 화면 맨위로 이동하도록 설정

 

https://cofs.tistory.com/188