CSS

[CSS] - 맨위로 버튼 만들고 Jquery 효과 주기

Riucc 2018. 10. 25. 14:23

○ 맨위로 버튼 만들고 Jquery 효과 주기 

 

@media 를 이용하여 반응형 페이지를 만들 때, 게시물이 길어져 스크롤바가 쭈욱 내려가게 된다

이럴 때 사용자 편의성을 위해서 일정부분 내려가면 맨위로 가는 버튼이 나와

맨위로 갈 수 있게 만들어보자


 // html


1. awesome font를 사용하기 위해서 <head>에 링크를 추가하기

<!-- 맨위로 화살표 아이콘 사용하기 위해 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">


2. 맨위로 버튼 위치 설정하기


<!-- 클릭 시 맨위로 보내는 아이콘 부분 반응형에서만 나타나게 설정해주자

      pc 화면에서 display:none; 해서 가리면 된다 -->

<!-- bottom:20px, right:20px, position:fixed 를 줘서 오른쪽 하단에서 20px만큼 오른쪽 20px만큼

      띄워주는 것이다 -->

<a style="display:scroll; position:fixed; bottom:20px; right:20px; font-size: 40px;" href="#" class="gototop"><i class="fas fa-arrow-alt-circle-up"></i></a>


3. Jquery를 이용하여 맨위로 가는 부드러운 효과를 설정해주자

<!-- 스크롤하여 밑으로 어느정도 내려갔을대 사라지고 나타나는 효과 -->
<!-- this.scrollTop 로 스크롤바 위치를 가져와서 400보다 크면 나타나게
         아니면 사라지게 맨위로 버튼에 효과를 준다 -->
<script>
    $(window).scroll(function() {
        if ($(this).scrollTop() > 400) {
            $('.gototop').fadeIn();
        } else {
            $('.gototop').fadeOut();
        }
    });
</script>

<!-- 맨위로 버튼을 눌렀을 때, html body 쪽으로(맨위로) 
         스르르 올라가도록 애니메이션 효과를 준다 -->
<script>
    $('.gototop').click(function() {
        $('html, body').animate({
            scrollTop: 0
        }, 400);
        return false;
    });
</script>


저작자표시