[리액트 React] fullPage 사용 시 상단으로 이동하기 / 100vh 스크롤 이벤트 / 100vh scroll / How to get to the top

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 리액트에서 fullPage jQuery 라이브러리 사용 시 상단으로 이동하는 방법에 대해 공유하겠습니다.

이전에 100vh를 사용하여 스크롤마다 전체 화면이 바뀌는 fullPage jQuery 사용 방법에 대해 공유했었는데요.

[리액트에서 fullPage 사용하는 방법]

[리액트 React] fullPage 사용하기 / 100vh 스크롤 이벤트 / 100vh scroll / Type annotations can only be used in TypeSc

 

 

해당 포스팅은 위 게시글을 따라하고 코드를 작성했다는 가정 하에 작성되었습니다.

리액트에서 fullPage jQuery 라이브러리를 사용한 후에

이미지에 보이는 것과 같은 버튼을 클릭했을 때, 한번에 맨 상단으로 이동하게 만들어봅시다.

 

 

react fullPage 맨 상단으로 이동하는 방법

style은 빼고 간략하게 적을게요.

import React, {useState, useEffect} from 'react';
import 'fullpage.js/vendors/scrolloverflow';
import 'fullpage.js';
import 'fullpage.js/dist/jquery.fullpage.min.css';
import $ from 'jquery';

export default function FullPageLanding( {
	const [topBtn, setTopBtn] - useState();

	useEffect(() => {
        $((){
            $('#fullpage').fullpage({
                scrollOverflow: true,
                navigation: true,
                scrollHorizontally: true,
                showActiveTooltip: true,
                scrollingSpeed: 800,
                fitToSection: true,
                fitToSectionDelay: 1200,
                // 화면별 버튼 전환
                afterLoad: function (index, anchorLink) {
                    if (anchorLink === 1) {
                    	setTopBtn(false);
                    } else if (anchorLink === 2) {
                    	setTopBtn(true);
                    } else if (anchorLink === 3) {
                    	setTopBtn(true);
                    }	
                },
            });	
        });
    }, [])
 
 const handleTop = () => {
    $.fn.fullpage.moveTo(1, 1);
    $.fn.fullpage.setScrollingSpeed(700);
  };
  
  return (
    <div id="fullpage">
      <div className="section">first page</div>
      <div className="section">second page</div>
      <div className="section">third page</div>
      <button onClick={() => handleTop()}>TOP</botton>
    </div>
  );
}