CSS Scroll Smooth

2022. 12. 14. 15:45·개발정보
반응형

웹사이트를 개발하다보면 특정 버튼을 누르면 해당 위치까지 스크롤을 자동으로 이동시켜야

하는 경우가 있다. 

이때, 해당 기능을 수행해주는 패키지도 있겠지만 CSS로 처리하는 방법이 있어서 

한번 작성해본다. 

 

아주 간단하다.

scroll의주체 {
    scroll-behavior: smooth;
}

스크롤이 발생하는 녀석에서  scroll-behavior 옵션을 주면 이쁘게 스크롤된다!

반응형
저작자표시 비영리 변경금지 (새창열림)

'개발정보' 카테고리의 다른 글

소프트웨어 개발 3대 원칙 - KISS, YAGNI, DRY  (0) 2023.01.26
RSS 피드란?  (2) 2023.01.21
SEO  (0) 2022.12.09
Error: Cannot find module 'semver'  (0) 2022.12.08
Naver Cloud 서버 만들기  (0) 2022.12.06
'개발정보' 카테고리의 다른 글
  • 소프트웨어 개발 3대 원칙 - KISS, YAGNI, DRY
  • RSS 피드란?
  • SEO
  • Error: Cannot find module 'semver'
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    자바스크립트
    Node.js
    Babel
    알고리즘
    next.js
    CSS
    타입스크립트
    리액트
    덤프
    redux
    바질
    리얼학습일기
    ChatGPT
    식물
    typescript
    타일러영어
    Docker
    ReactNative
    네트워크
    CCNA
    webpack
    네이버 부스트캠프
    react
    영어독학
    리얼클래스
    다이소
    프로그래머스
    바질 키우기
    영어회화
    javascript
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
CSS Scroll Smooth
상단으로

티스토리툴바