스크롤 최상단으로 이동하는 방법에 css와 js가 있습니다.
<div class="bar">
<a href="#">스크롤 최상단 css</a>
<a href="#" id="js-scroll">스크롤 최상단 JS</a>
</div>
css
html {
scroll-behavior: smooth;
}
위 처럼 스크롤 상태에 대한 smooth 속성을 사용해서 scroll을 부드럽게 처리할 수 있기 때문에 #인 포지션인 0으로 갈 때 부드럽게 이동합니다.
js
document.querySelector("#js-scroll").addEventListener("click", (e) => {
e.preventDefault();
window.scroll({
top: 0,
left: 0,
behavior: "smooth"
});
});
위의 방법도 스크롤을 부드럽게 처리하기 위한 옵션이 들어갑니다.
이 두가지 방법은 중요한 차이가 있습니다.
차이점 | CSS | JS |
Chrome | 통제가능 (스피드:천천히) | 통제 불가능 |
FireFox | 통제가능 (스피드:매우빠르게) | 통제가능(스피드:빠르게) |
Safari | 스무스 스크롤링 안됨 | 스무스 스크롤링 안됨 |
Edge | 통제가능(스피드:빠르게) | 통제 불가능 |
iOS | 스무스 스크롤링 안됨 | 스무스 스크롤링 안됨 |
- CSS 또는 Javascript를 통해 트리거되는 부드러운 스크롤 동작을 취소할 수 있습니다.
- 속도를 제어 할 수 있도록하거나 그렇지 않은 경우 브라우저가 중간 속도를 유지할 수 있도록 하세요.
'CSS' 카테고리의 다른 글
CSS Contain 속성에 대하여.. (0) | 2021.02.12 |
---|---|
햄버거 메뉴 라인 애니메이션 (SVG & CSS) (0) | 2021.02.12 |
SVG 라이브러리 (RoughNotation) 선긋기, 하이라이트 (0) | 2021.02.06 |
CSS Cascading 잘하기 (0) | 2021.02.02 |
[Modern CSS] 3탄 CSS만으로 반응형 풀사이즈 이미지 크기 만들기 (0) | 2021.01.31 |
댓글