Scroll to top button 만드는 가장 간단한 방법 1가지

Scroll to top 버튼은 웹페이지 길이가 길어져 스크롤을 아래로 계속 내린 후 다시 위로 올로 가야 할 때 버튼으로 쉽게 이동하기 위해 필요합니다. 그래서 종종 사용되며 다양한 방법으로 이 기술을 구현 할 수 있습니다. 오늘 알아볼 방법은 최근에 내가 사용한 방법 중 가장 간단한 방법으로 우측 하단에 화살표가 처음에는 없다가 스크롤이 어느 정도 내려가면 자동으로 나타나는 방식 입니다.

Scroll to top 버튼 만들기 코딩소스

스크립트(Java script)

<script>
// scroll to top
document.addEventListener('DOMContentLoaded', function() {
    var scrollToTopBtn = document.getElementById("scroll-to-top");

    window.onscroll = function() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            scrollToTopBtn.style.display = "block";
        } else {
            scrollToTopBtn.style.display = "none";
        }
    };

    scrollToTopBtn.addEventListener("click", function(e) {
        e.preventDefault();
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    });
});
</script>

일반 소스

<a href="#" id="scroll-to-top" title="위로 가기">
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
	<line x1="12" y1="19" x2="12" y2="5"></line>
	<polyline points="5 12 12 5 19 12"></polyline>
</svg>
</a>

화살표 이미지를 가져오는 소스 코드 입니다.

작성자 의견

일반적으로 scroll to top button 자바스크립트 소스 코드는 </body> 바로 전에 추가 합니다. 최근에 작업한 사이트인 쿠팡 할인 프로모션 및 이벤트 페이지를 만들면서 소스 코드를 구현해 봤습니다. 스크롤 업 되는 부분도 부드럽고 자연스러워 만족하고 있는 코드로 다른 분들에게 적극 추천 드립니다. 아래 스크린샷에서 우측 하단의 둥근 모양의 화살표 입니다.

본 게시물은 Web 카테고리로 작성자가 분류 했으며 관련 주제로 된 글을 더 많이 보실 수 있습니다.