JavaScript : 사이트 맨 위로 올리는 방법 : 예제, 구현

JavaScript : 사이트 맨 위로 올리는 방법 : 예제, 구현

 

많은 웹 사이트에서 가장 인기있는 트렌드는 맨 위로 이동 버튼이며,이 버튼을 클릭하면 자동으로 페이지 맨 위로 스크롤됩니다. 

이전에는 애니메이션 기능을 사용하여 jQuery를 사용하여 브라우저를 맨 위로 부드럽게 스크롤하는 방법을 설명했습니다.

맨 위로 jQuery를 사용하여 작업 한 여러 새로운 웹 사이트에서 이 스크립트를 많이 사용했지만 최근에는 웹 사이트 성능에 더 많은 노력을 기울이고 페이지 로딩 시간을 단축하는 방법에 대해 연구했습니다 .

노력한 가장 큰 것 중 하나는 jQuery를 응용 프로그램에 로드 할 필요가 없으며 순수한 JavaScript를 사용하는 것입니다.

jQuery를 필요한 경우가 있다는 것을 알고 있으며 전혀 사용할 필요가 없다고 말하지는 않지만 간단한 클릭 이벤트만하면 jQuery를 사용할 필요가 없습니다.

따라서 이 jQuery 부드러운 스크롤 상단 기능을 다시보고 순수한 Javascript를 사용하고 jQuery에 대한 종속성을 제거하여 달성하기로 결정했습니다.

 

 

 

The HTML

먼저 사용자가 클릭 할 수 있도록 페이지에 HTML 엘리먼트가 있어야 합니다.

클릭 이벤트를 추가 할 수있는 버튼, div 또는 범위 일 수 있습니다.

 

<div class="back-to-top pointer" onclick="scrollToTop();return false;">Back to top ^</div>

 

 

 

위 HTML에서 onclick 속성에 주목하십시오. 이제 scrollToTop () 함수가 실행됩니다. 

이 기능을 사용하려면 사용자를 맨 위로 스크롤하고 싶지만 부드러운 스크롤처럼 보이게 하려면 페이지를 조금씩 천천히 스크롤해야합니다. 

먼저 페이지가 이미 창의 맨 위에 있는지 확인하고 그렇지 않은 경우 스크립트를 계속 진행합니다.

 

 

if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0)
{

}

 

 

 

그런 다음 창을 가져 와서 창 상단으로 -50px 스크롤합니다.

 

window.scrollBy(0,-50);

 

 

 

 

50px 위로 스크롤 한 후이 scrollToTop () 함수를 10 밀리 초마다 반복하도록 시간 초과를 설정해야합니다. 그러면 세로 위치 0으로 돌아올 때까지 페이지 위쪽으로 부드러운 스크롤 효과가 다시 만들어집니다.

 

<script>
    var timeOut;
    function scrollToTop() {
        if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
            window.scrollBy(0,-50);
            timeOut=setTimeout('scrollToTop()',10);
        }
        else clearTimeout(timeOut);
    }
</script>