[JavaScript] Top 스크롤 제작하고 페이지 최상단으로 올리기

Doyeon0430 | 2023년 05월 28일

이번시간에는 자바스크립트에 이벤트 함수를 사용해 상단 스크롤을 만들어보겠습니다.

웹 페이지가 하단으로 내려갔을 때 버튼을 누르면 최상단으로 올라가는 기능입니다.

현재 제 블로그에도 상단 스크롤 버튼이 적용되어 있습니다.

상단 스크롤 만들기 - 문법
상단 스크롤 만들기 - HTML
상단 스크롤 만들기 - JavaScript

1. 상단 스크롤 만들기 - 문법

문서의 스크롤 위치값을 픽셀로 반환하는 속성입니다.

1. JavaScript

console.log(window.pageYOffset);

예를 들어 콘솔창에 다음과 같은 수식을 입력하면

현재 페이지의 스크롤 위치 값을 숫자 형태로 반환 할 수 있습니다.

window.pageYOffset뿐만 아니라

document.documentElement.scrollTop와

document.body.scrollTop도 있습니다.

2. 상단 스크롤 만들기 - HTML

HTML만 사용해서 스크롤 버튼 디자인을 제작하겠습니다.

이미지 파일은 부트스트랩에서 가져왔습니다.

자세한 사항은 아래 링크를 통해 확인할 수 있습니다.

주소 : 부트스트랩 아이콘 링크

1. HTML

<a id="scrollTopLink" href="#" style="position: fixed; bottom: 1.5rem; right: 1.5rem; display: none;">
    <img style="width: 35px; height: 35px; opacity: 0.7;" src="{% static 'img/top.png' %}" alt="My Image">
</a>

자바스크립트를 사용하기 위한 id 값을 생성합니다.

style에 fixed를 넣고 오른쪽 하단에 위치시켰습니다.

또한 display는 none으로 하고 스크롤이 내리는 순간 표시되게 만들겁니다.

마지막으로 href에 #을 입력해서 클릭 시 최상단으로 가게 설정하면 됩니다.

3. 상단 스크롤 만들기 - JavaScript

1. JavaScript

<script>
    // 스크롤 이벤트 리스너 추가
    window.addEventListener('scroll', function() {
      // 현재 스크롤 위치
      var scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  
      // 스크롤이 1px 이상 내려갔을 때
      if (scrollPosition > 0) {
        // 링크 보이기
        document.getElementById("scrollTopLink").style.display = "block";
      } else {
        // 링크 숨기기
        document.getElementById("scrollTopLink").style.display = "none";
      }
    });
</script>

스크롤 값을 반환받기 위해 새로운 변수를 지정했습니다.

window.pageYOffset뿐만 아니라 여러개를 지정한 이유는 브라우저 호환성 때문에 작동을 안할 수 있기 때문입니다.

이제 scroollPosition이 0보다 커지는 순간 display를 block으로 변경시키면 완성입니다.

댓글이 없습니다.

간편 댓글 작성