아기 천사들~

코딩 어린이의 노트

[jquery] scroll 부드럽게 이동하기

sunny0729 2023. 1. 9. 10:17
728x90
반응형

 

안녕하세요:)

 

오늘도 만들기는 쉽지만 

찾아보기는 귀찮은 [ 스크립트 ]를 적어볼까 합니다.

 

바로 [ 원페이지 ]에서 사용하는 

스크롤 부드럽게 이동하기입니다.

 

 

원페이지에서는 메뉴에 [ a ] 태그에

링크를 걸고 아래쪽으로 이동시키는 방법을  많이 쓰죠

 

[ a ] 링크를 눌렀을 때 

뿅~~ 하고 뜨는 게 아니라

밑으로 스크롤이 부드럽게 내려가면~~

얼마나 자연스러울까요~~

 

1
2
3
4
5
6
$('a').click(function(){
    $('html, body').animate({
        scrollTop:$($.attr(this'href')).offset().top
    }, 500);
    return false;
})
cs

 

스크립트 내용은 아주 간단합니다.

이 내용만 넣어주면 [ a ]를 눌렀을 때 

 

부드~~럽게 밑으로 내려가는 걸 

볼 수 있습니다.

 

이렇게 저의 노트에 한 가지가 더 생겼습니다.

늘 기억이 안 나 이리저리 검색해 보던 것들을

이렇게 정리하니 마음이 든든하네요.

 

 

이제는 저의 노트만 보면~~ 

아 이거지~~~ 라고 생각할 수 있게 됐어요

 

잘못된 부분은 말씀해 주세요.

728x90
반응형