Web, jQuery : 스크롤 움직임으로 맨 위로 가기 버튼을 만드는 방법

Web, jQuery : 스크롤 움직임으로 맨 위로 가기 버튼을 만드는 방법

 

사람들에게 페이지를 유지시키려면 웹 사이트에서 좋은 사용자 환경을 만드는 것이 매우 중요합니다. 좋은 사용자 환경을 만드는 가장 좋은 방법은 사람들이 쉽게 사용할 수 있도록 하는 것입니다. 사이트를 사용하기 어려운 경우 사람들을 귀찮게하고 계속 움직일 것입니다. 페이지에 많은 정보가 있는 웹 사이트의 경우 페이지를 아래로 스크롤하여 정보를 소비합니다.

페이지 스크롤이 무한한 Google+와 같은 웹 사이트는 페이지 상단으로 돌아가 링크를 클릭하면 매우 성가실 수 있습니다. 페이지를 새로 고치거나 스크롤 막대를 맨 위로 다시 이동할 수 있습니다. 시작 스크롤이 있는 웹 사이트는 상단으로 쉽게 돌아갈 수 있도록 무언가가 필요합니다. 이것은 맨 위로 스크롤하는 버튼으로 수행됩니다. 이 튜토리얼에서는 jQuery를 사용하여 애니메이션 스크롤 상단 버튼을 만드는 방법을 배웁니다.

 

 

 

Button

먼저 버튼을 만들어 줍니다.

<a href="#" class="scrollToTop">Scroll To Top</a>

 

이제 다음 CSS로 버튼의 스타일을 지정할 수 있습니다.

.scrollToTop{
    width:100px; 
    height:130px;
    padding:10px; 
    text-align:center; 
    background: whiteSmoke;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    position:fixed;
    top:75px;
    right:40px;
    display:none;
    background: url('arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
    text-decoration:none;
}

 

이 위치를 유지하기 위해 고정한 페이지의 오른쪽 상단에 맨 위로 스크롤 버튼을 위치시킵니다. CSS에서 볼 수 있듯이 브라우저에서 숨겨 지도록 디스플레이를 none으로 설정했습니다. jQuery 코드에서 왜 그렇게하는지 알 수 있습니다.

 

 

 

jQuery

아래는 이 기능의 jQuery 부분입니다. 스크롤 이벤트에 동작을 추가하여 창 상단에 있지 않을 때 버튼을 표시 한 다음 페이지 상단에 있을 때 버튼을 사라지게합니다. 그런 다음 버튼에서 클릭 이벤트를 생성하여 창 상단으로 스크롤해야합니다. Javascript 파일에 다음을 복사하여 붙여 넣어 Javascript 기능을 추가하십시오.

$(document).ready(function(){

    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });

    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });

});

 

방문자가 창을 스크롤 할 때 실행되는 스크롤 기능을 사용합니다. 그런 다음 scrollTop 함수를 사용하여 창의 위치를 계산할 수 있습니다. 위치가 100보다 더 이동하면 버튼을 표시하려고 합니다. fadeIn 기능을 사용하여 첫 번째 애니메이션 비트를 화면에 추가하여 버튼을 표시합니다.

scrollTop이 100보다 작으면 윈도우가 상단 근처에 있다는 것을 알고 버튼을 표시 할 필요가 없습니다. 이제 상단으로 스크롤 버튼에 클릭 이벤트를 추가 할 수 있습니다. 이 버튼의 클릭 동작에서 애니메이션 기능을 사용하여 페이지를 상위 n 애니메이션으로 다시 스크롤하려고 합니다. 창의 맨 위로 스크롤하려면 scrollTop 속성을 0으로 변경해야 합니다. 이것이 매우 유용한 기능을 재생성하는 데 필요한 전부입니다.