리액트스크롤 2

[CSS 버튼 클릭시 특정위치로 스크롤 이동 !

[CSS / JS ] 버튼 클릭시 특정위치로 스크롤 이동 ! window.scrollTo(x, y); window.scrollTo 함수는 웹 페이지의 스크롤 위치를 지정한 위치로 이동시키는 자바스크립트 함수이다. 이 함수를 사용하면 사용자가 페이지를 스크롤할 때마다 스크롤 위치를 프로그래밍적으로 제어할 수 있다.  window.scrollTo(0, 0); 페이지의 최상단으로 스크롤window.scrollTo(0, 100);  페이지의 세로 스크롤 위치를 100px 아래로 이동.  또한 옵션으로 { behavior: 'smooth' }와 같은 객체를 전달해서 부드러운 스크롤 효과를 적용할 수 있음.   내가 적용할건 간단히 페이지 상단으로 스크롤을 한번에 이동시키는 동작이다. window.scrollTo(..

퍼블리싱 2024.02.29

[CSS/JS] 고정된 fixed 요소 특정 영역에서 숨기기 멈추기 !

[CSS/JS/ 프론트엔드] position:fixed 요소 특정 영역에서 숨기기 멈추기  position:fixed위 속성은 요소의 위치를 고정시키는 역할을 한다.페이지 스크롤을 위아래로 움직여도 해당 요소는 움직이지 않고 화면에 고정된다.  현재 제작중인 홈페이지에서 position fixed로 지정된 요소를 스크롤위치에 따라 스위치 효과를 주려고한다. 홈페이지에 처음 접속했을 때 보이는 메인영역에만 fixed 요소를 숨겨야한다. 메인영역에 적혀있는 타이틀과 fixed 요소의 문구가 일치하기 때문에 텍스트 중복을 피하기 위함이다. 우선 성공적으로 구현한 화면이다. 메인영역에서 스크롤을 내리면 fixed 요소가 보여지고 메인영역으로 스크롤을 올리면 다시 fixed 요소가 사라진다.   스크롤 위치 추적..

퍼블리싱 2024.02.29