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
반응형
'코딩 어린이의 노트' 카테고리의 다른 글
배경 이미지를 흐릿하게 만들어 보자 (0) | 2023.02.06 |
---|---|
배경이미지의 채도를 조절해요 (0) | 2023.02.01 |
CSS 배경이미지만 투명하게 만들 (1) | 2023.01.27 |
[jquery] ScrollTop 버튼 (2) | 2023.01.06 |
코딩을 배우는 자세 (2) | 2023.01.03 |