맨 위로 돌아가기 위해 반응을 구현하는 방법

React는 맨 위로 돌아가는 방법을 구현합니다. 1. 기능적 구성 요소 "ScrollDemo.js"를 생성합니다. 2. 버튼을 생성하고 "function handlerScroll(){document.body.scrollTop = document.documentElement.scrollTop" 코드를 전달합니다. = 0 ;}"을 입력하면 상위로 복귀하는 효과를 얻을 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

리액션에서 맨 위로 돌아가기를 구현하는 방법은 무엇입니까?

지식 준비:

scrollTop은 요소가 스크롤되지 않을 때 콘텐츠 영역 위에 숨겨진 픽셀 수를 나타냅니다. 요소가 수직으로 스크롤되면, scrollTop의 값이 증가합니다

대상 효과:

"Back to Top" 버튼을 클릭한 후 scrollTop이 0인 곳, 즉 최상위로 돌아갈 수 있다는 것을 알고 싶습니다.

아래에서 기능적 구성 요소인 ScrollDemo.js를 만듭니다. 그리고 클릭하면 HandleScroll 메서드를 호출하는 버튼 안에 키 코드를 작성합니다. 버튼 위치 고정

<button
                onClick={handleScroll}
                style={{
                    position: &#39;fixed&#39;,
                    top: &#39;320px&#39;,
                    right: &#39;0&#39;,
                    width: &#39;50px&#39;,
                    height: &#39;50px&#39;,
                    zIndex:&#39;3&#39;,
                    backgroundImage: &#39;linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%)&#39;,
                    border:&#39;0&#39;,
                    transition:&#39;all 1s&#39;
            }}>回到顶部</button>
function handleScroll(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }

권장 학습: "react 비디오 튜토리얼"

위 내용은 맨 위로 돌아가기 위해 반응을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!