$(document).ready(function() {
    // main2에 내려가기전까지 버튼 숨기기
    $('.t-btn').hide();

    // 스크롤 이벤트 감지
    $(window).scroll(function() {
        // main2의 위치를 확인하여 버튼 보이기/숨기기
        var section2Offset = $('.main2').offset().top;
        if ($(window).scrollTop() > section2Offset) {
            $('.t-btn').fadeIn();
        } else {
            $('.t-btn').fadeOut();
        }
    });

    // 버튼 클릭 시 상단으로 스크롤
    $('.t-btn').click(function() {
        $('html, body').animate({ scrollTop: 0 }, 'slow');
    });
}

document.addEventListener("DOMContentLoaded", function () {
  // main2에 내려가기전까지 버튼 숨기기
  const tBtn = document.querySelector('.t-btn');
  if (tBtn) {
    tBtn.style.display = 'none';
  }

  // 스크롤 이벤트 감지
  window.addEventListener("scroll", function () {
    // main2의 위치를 확인하여 버튼 보이기/숨기기
    const main2 = document.querySelector('.main2');
    if (main2) {
      const section2Offset = main2.getBoundingClientRect().top;
      if (window.scrollY > section2Offset) {
        if (tBtn) {
          tBtn.style.display = 'block';
        }
      } else {
        if (tBtn) {
          tBtn.style.display = 'none';
        }
      }
    }
  });

  // 버튼 클릭 시 상단으로 스크롤
  if (tBtn) {
    tBtn.addEventListener("click", function () {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  }
});

// 스크롤 이벤트 감지하여 버튼 보이기/숨기기
function handleScroll() {
  const tBtn = document.querySelector('.tBtn')

  if (tBtn instanceof HTMLElement) {
    const scrollPosition = window.scrollY

    if (scrollPosition > 500) {
      tBtn.style.display = 'block'
    } else {
      tBtn.style.display = 'none'
    }
  }
}

// 버튼 클릭 시 상단으로 스크롤
function scrollToTop() {
  const tBtn = document.querySelector('.t-btn')
  if (!tBtn) return

  tBtn.addEventListener('click', function () {
    window.scrollTo({ top: 0, behavior: 'smooth' })
  })
}

// 페이지 로드 시 초기화 및 이벤트 리스너 등록
document.addEventListener('DOMContentLoaded', function () {
  handleScroll()
  scrollToTop()

  // 스크롤 이벤트 리스너 등록
  window.addEventListener('scroll', handleScroll)
})

import React, { useState, useEffect } from 'react';

function TopButton() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    // 스크롤 이벤트 핸들러
    function handleScroll() {
      const scrollPosition = window.scrollY;
      setIsVisible(scrollPosition > 500);
    }

    // 스크롤 이벤트 리스너 등록
    window.addEventListener('scroll', handleScroll);

    // 컴포넌트가 마운트 되었을 때 초기 스크롤 위치에 따라 버튼 보이기/숨기기 설정
    handleScroll();

    // 컴포넌트 언마운트 시 스크롤 이벤트 리스너 제거
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <button
      className="t-btn"
      style={{ display: isVisible ? 'block' : 'none' }}
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
    >
      Top
    </button>
  );
}

export default TopButton;

import React, { useState, useEffect } from 'react'

import '../styles/themeMode.css'

function TopButton() {
  const [isVisible, setIsVisible] = useState(false)

  useEffect(() => {
    // 스크롤 이벤트 핸들러
    function handleScroll() {
      const scrollPosition = window.scrollY
      setIsVisible(scrollPosition > 500)
    }

    // 스크롤 이벤트 리스너 등록
    window.addEventListener('scroll', handleScroll)

    // 컴포넌트가 마운트 되었을 때 초기 스크롤 위치에 따라 버튼 보이기/숨기기 설정
    handleScroll()

    // 컴포넌트 언마운트 시 스크롤 이벤트 리스너 제거
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  // 스타일 객체를 생성하는 함수
  const buttonStyle: React.CSSProperties = {
    position: 'fixed',
    bottom: '110px',
    right: '25px',
    border: 'none',
    borderRadius: '50%',
    width: '50px',
    height: '50px',
    fontSize: '24px',
    cursor: 'pointer',
    display: isVisible ? 'block' : 'none', // isVisible 상태에 따라 동적으로 설정
  }

  return (
    <button
      style={buttonStyle}
      className="tBtn"
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
    >
      👆
    </button>
  )
}

export default TopButton