TIL) 스파르타 개발일지 23-01-26

Top scrol btn 구현

usestate를 사용하여 버튼의 상태를 관리.

스크롤의 Y축(웹 페이지의 스크롤 정도) 에 따라 나타났다 사라졌다 하는 기능을 추가.

커서 hover를 통해서 투명도를 주었음.

 

이슈가 있다면, Link to를 통해서 들어간 특정 페이지에서 기능은 정상적이나, 이미지가 렌더되지 않는 현상이 있음...

Try : 라우터를 통해서 주는경우, 직적접으로 페이지에서 주는 경우 둘다 렌더 되지않음.

 

import 부분

import styled from 'styled-components';
import React, { useState, useEffect } from 'react';

---

본문 코드

const TopButton = () => {
  const [showTopButton, setShowTopButton] = useState(false);
  // TopButton
  const handleScrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
  useEffect(() => {
   const ShowTopButtonClick = () => {
    if (window.scrollY > 200) {
      setShowTopButton(true);
    } else {
      setShowTopButton(false);
    }
  }
  window.addEventListener("scroll", ShowTopButtonClick)
  return () => {
    window.removeEventListener("scroll", ShowTopButtonClick)
  }
}, [])

  return (
    <>
    {showTopButton &&
      <TopScrollButton onClick={handleScrollToTop}>
        <img src='TopBtn.png' alt='topScroll' />
      </TopScrollButton>
    }
    </>
  );
};
export default TopButton;

---

CSS 부분

const TopScrollButton = styled.div`
  cursor: pointer;
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 90px;
  right: 30px;
  z-index: 1;
  img {
    width: 100%;
    height: 100%;
  }
  :hover {
    opacity: 0.6;
  }
`;