IT, 모바일

[JS, JQUERY] 부드러운 페이지 스크롤 효과

siane

• 1 min read
[JS, JQUERY] 부드러운 페이지 스크롤 효과

회사 사이트 리뉴얼 중 넣으면 좋겠다 해서 찾아보니 있어서 메모합니다.

스타일시트에서 한 줄 삽입하면 같은 효과가 나오지만, 몇몇 브라우저에서 제대로 동작하지 않는다고 하고, 속도 제어가 어렵다고 합니다.

스타일시트 적용 방법은 아래와 같습니다.

CSS 파일에 이렇게 넣어주세요.

html { scroll-behavior: smooth; }

크롬 71, 파이어폭스 36, 오페라 48부터 지원되며, IE에서는 지원되지 않습니다.(망할놈의 IE…)

결국 스크립트를 이용해야 합니다.

<head> 부분에 아래와 같이 넣어주면 동작합니다.

테스트 할때는 캐시를 다 지우고 확인하면 됩니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="http://fatlinesofcode.github.io/jquery.smoothwheel/src/jquery.smoothwheel.js"></script>
<script>
$(document).ready(function(){
	$("body").smoothWheel()
});
</script>

github 링크 : https://github.com/fatlinesofcode/jquery.smoothwheel
fatlinesofcode/jquery.smoothwheelCross browser smooth mouse wheel and trackpad scrolling – fatlinesofcode/jquery.smoothwheelgithub.com

데모페이지 링크 : http://fatlinesofcode.github.io/jquery.smoothwheel/demo/smoothwheel.html
http://fatlinesofcode.github.io/jquery.smoothwheel/demo/smoothwheel.html
fatlinesofcode.github.io

{{#is "post"}} {{/is}}