App.css

@font-face { font-family: 'TTTogether'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/TTTogetherA.woff') format('woff'); font-weight: normal; font-style: normal; }
#topBtn {
    text-decoration: none;
    position: fixed;
    bottom: 120px;
    right: 40px;
    width: 60px;
    height: 60px;
    color: #fff;
    box-shadow: 0 0 15px #4f839750;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    text-align: center;
    line-height: 58px !important;
    font: normal 16px "TTTogether";     
    text-transform: lowercase;
    z-index: 9999; /* 포지션을 먼저 지정후 z-좌표(레이어) : 9999입니다. */ 
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -o-transition: all .8s;
    transition: all .8s;
    border: none;
    cursor: pointer;
}
 
 
#topBtn:hover {
    color: #fff;
    background: rgba(79, 131, 151, .7);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

 

 

 

 

다음과 같이 smooth Contrller 안될때

window.scrollTo({
          top: 0,
          left: 0,
          behavior: "smooth"
        });

 

 

라이브러리 설치

npm install seamless-scroll-polyfill;

 

 

 

 

ScrollTop.js

// React와 필요한 훅들을 임포트합니다.
import React, { useCallback, useEffect, useState } from 'react'
// 스크롤 폴리필 라이브러리를 임포트합니다.
import { elementScrollIntoView } from 'seamless-scroll-polyfill';
 
// ScrollTop 컴포넌트를 정의합니다.
const ScrollTop = () => {
 
    // showButton 상태를 정의하고 초기값을 false로 설정합니다.
    const [showButton, setShowButton] =useState(false);
    // scrollToTop 함수를 정의합니다. 이 함수는 페이지 최상단으로 스크롤하는 역할을 합니다.
    const scrollToTop = useCallback(() => {
        elementScrollIntoView(document.getElementById("root"), {
            behavior: 'smooth',
        });
    }, []);
 
    // useEffect 훅을 사용하여 스크롤 이벤트 리스너를 추가합니다.
    useEffect(()=>{
        const handleShowButton=()=>{
            // 스크롤 위치가 500보다 크면 버튼을 보이게 하고, 그렇지 않으면 숨깁니다.
            if (window.scrollY > 500) {
                setShowButton(true)
            } else {
                setShowButton(false)
            }
        }
        // 스크롤 이벤트 리스너를 추가합니다.
        window.addEventListener("scroll", handleShowButton);
 
        // 컴포넌트가 언마운트될 때 스크롤 이벤트 리스너를 제거합니다.
        return ()=>{
            window.removeEventListener("scroll", handleShowButton);
        }
    })
 
    // showButton 상태에 따라 버튼을 렌더링합니다.
    return showButton && (
        <>
            {/* 버튼을 클릭하면 scrollToTop 함수가 실행됩니다. */}
            <button type="button"  id="topBtn" onClick={scrollToTop} >TOP</button>
        </>
    )
}
 
// ScrollTop 컴포넌트를 export 합니다.
export default ScrollTop

 

 

 

위의 코드는 “탑으로 가기” 버튼을 구현한 React 컴포넌트입니다.

사용자가 페이지를 아래로 스크롤하면 버튼이 나타나고, 버튼을 클릭하면 페이지가 최상단으로 부드럽게 스크롤됩니다.

이 컴포넌트는 seamless-scroll-polyfill 라이브러리를 사용하여 스크롤 기능을 구현하고 있습니다.

이 라이브러리는 모든 브라우저에서 부드러운 스크롤을 지원하도록 해줍니다.

이 컴포넌트를 사용하려면 애플리케이션의 적절한 위치에 추가하면 됩니다.

 

 

 

 

 

 

넥스트

"use client"
// React와 필요한 훅들을 임포트합니다.
import React, { useCallback, useEffect, useState } from 'react'
// 스크롤 폴리필 라이브러리를 임포트합니다.
import { elementScrollIntoView } from 'seamless-scroll-polyfill';
  
// ScrollTop 컴포넌트를 정의합니다.
const ScrollTop = () => {
  
    // showButton 상태를 정의하고 초기값을 false로 설정합니다.
    const [showButton, setShowButton] =useState(false);
    // scrollToTop 함수를 정의합니다. 이 함수는 페이지 최상단으로 스크롤하는 역할을 합니다.
  
    const scrollToTop = useCallback(() => {
        // 페이지의 최상단 요소로 스크롤합니다. 예를 들어, 'body'를 사용해도 됩니다.
        elementScrollIntoView(document.body, {
          behavior: 'smooth',
        });
      }, []);
    


    // useEffect 훅을 사용하여 스크롤 이벤트 리스너를 추가합니다.
    useEffect(()=>{
        const handleShowButton=()=>{
            // 스크롤 위치가 500보다 크면 버튼을 보이게 하고, 그렇지 않으면 숨깁니다.
            if (window.scrollY > 500) {
                setShowButton(true)
            } else {
                setShowButton(false)
            }
        }
        // 스크롤 이벤트 리스너를 추가합니다.
        window.addEventListener("scroll", handleShowButton);
  
        // 컴포넌트가 언마운트될 때 스크롤 이벤트 리스너를 제거합니다.
        return ()=>{
            window.removeEventListener("scroll", handleShowButton);
        }
    })
  
    // showButton 상태에 따라 버튼을 렌더링합니다.
    return showButton && (
        <>
            {/* 버튼을 클릭하면 scrollToTop 함수가 실행됩니다. */}
            <button type="button"  id="topBtn" onClick={scrollToTop} >TOP</button>
        </>
    )
}
  
// ScrollTop 컴포넌트를 export 합니다.
export default ScrollTop