스크롤 이벤트 - 클릭시 상단으로 이동하는 버튼 구현

*문서 높이 구하기 - scrollHeight, offsetHeight

docHeight = docElem.scrollHeight;
            console.log(docHeight);
            
            
docHeight = docElem.offsetHeight;
            console.log(docHeight);

※ 보통의 경우에는 scrollHeight, offsetHeight 둘다 같은 값을 보여주지만,

브라우저에 따라서는 같은 브라우저라도 scrollHeight, offsetHeight 가 다를수 있다.

그래서, scrollHeight 이 700이고, offsetHeight 이 800일 때, 높은 값을 저장하고 싶을때

Math.max (최대값)과 Math.min (최소값) 을 구할수 있다.

 

코드로 넘어가서

   ---- 초기 코드 ----
   
// docHeight = docElem.scrollHeight;

docHeight = docElem.offsetHeight;
scrollPos = docElem.scrollTop;

console.log(scrollPos);


   ---- 변경 코드 ----

// docHeight = docElem.scrollHeight;
docHeight = Math.max(docElem.offsetHeight, docElem.scrollHeight); 
scrollPos = docElem.scrollTop;

console.log(scrollPos);

 

 

 

*스크롤의 양 - scrollTop

docHeight = docElem.offsetHeight;
            scrollPos = docElem.scrollTop;

            console.log(scrollPos);
            
설명
스크롤의 양을 알수있다 - scrollTop

가장 상단에서 스크롤 하지 않았을땐 콘솔에 0이 찍히고

스크롤을 어느 정도 한뒤에 새로고침 후 다시 보면 해당하는 양이 찍힌다

 

*스크롤 양을 자동으로 계속 찍히게

window.addEventListener('scroll', function() {
                scrollPos = docElem.scrollTop;
                console.log(scrollPos);
                btt.className = (scrollPos > offset) ? 'visible' : '';
            });



설명
스크롤 이벤트를 실행하면(스크롤 하면) docElem (문서 크기)에 scrollTop (스크롤 양)을
스크롤 할때마다 나타나고
scorllpos가 offset보다 커지면 top으로 가는 버튼이 생긴다.

 

- 현재 상태에서 top버튼을 누르면 바로 탑으로 슝 가버린다

이유는 # 빈 링크가 걸려서이다.

빈링크로 탑으로 가는것이 아닌 스크롤 양을 0으로 바꿔서 올라가게 바꿔준다.

 

a링크의 기본 속성을 막을려면

preventDefault( ); 사용

btt.addEventListener('click', function(ev) {
                ev.preventDefault(); //링크의 본연의 기능을 막는다.
            });
            
            
top 버튼을 눌러도 상단으로 가지 않는다.




아래 코드에서 스크롤 탑 양을 0으로 바꿔준다.

btt.addEventListener('click', function(ev) {
                ev.preventDefault();          //링크의 본연의 기능을 막는다.
                docElem.scrollTop = 0;        //docElem의 스크롤 양을 0으로 바꿈
                
            });
           
빈링크 일때와 마찬가지로 현재는 바로 탑으로 슝 올라간다


점차 적으로 스크롤 상승을 하기 위해서는

function scrollToTop() {
                // 일정시간 마다 할일
                // var scrollInterval = setInterval(할일, 시간);
                // 0.0015s = 15
                // 할일 = function() { 실제로 할일 }
                //(실제로 할일은) 윈도우 스크롤이 0이 아닐때 window.scrollBy(0,-55); - scrollBy(x,y);
                // 스크롤이 0이면 setInterval 멈춰라. clearInterval(이름);

                var scrollInterval = setInterval(function() {
                    if(scrollPos != 0) {
                        window.scrollBy(0,-55);
                    } else {
                        clearInterval(scrollInterval);
                    }
                }, 15);

            }
            
            
결과
시간에 15 (0.0015초)
scrollBy(0, -55);

0.0015초 마다 -55 씩 점차적으로 상승한다.
그리고 스크롤양이 0이 되면 조건문의 else 가 작동해서 Interval을 멈춰준다.