메뉴 보이기
Profile
이온디

2014.09.29

Script

Top으로 스크롤 되면서 돌아가기... (by sisims)

조회 수 1369 추천 수 0
출처 및 URL http://miniwini.com/miniwinis/bbs/index....08&p=7 
소스 <html>
<head>
<script>
function back_top()
{
x = document.body.scrollLeft;
y = document.body.scrollTop;
step = 2;

while ((x != 0) || (y != 0)) {
scroll (x, y);
step += (step * step / 100);
x -= step;
y -= step;
if (x < 0) x = 0;
if (y < 0) y = 0;
}
scroll (0, 0);
}
</script>
<body>
아래로 스크롤 하신후에 아이콘을 눌러보세요<br>
물론 가로 스크롤에서도 사용가능합니다. :)
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<img src="http://miniwini.com/img/i_home.gif" onclick="back_top()" style=cursor:hand alt="꼭대기로 올라갈까요?" align=right>
</body>
</html> 

문서가 길어져서 스크롤이 길어지는 경우
보통 'top'이라는 버튼을 두어서 가장 위로 올라가게 합니다.
이때 그냥 페이지가 바뀌면서 돌아가는 것이 아니라...
현재 위치에서 스크롤 되면서 돌아가게 됩니다.

제 홈에서 써먹어 볼라고 만들어 봤는데 괜찮은거 같아서...
이렇게 같이 써먹어 보자고... 올려봅니다 ^^

끝으로 스텝값이나 가속값 같은것은 적절하게 조절해서 사용하시면 되겠습니다 :)


#파이어폭스나 크롬에서는 동작하지 않습니다.

scrollLeft나 scrollTop은 브라우저의 scroll bar의 값을 구하는 메서드입니다.


document.body.scrollTop 을 document.documentElement.scrollTop 으로 대체해봐도 안되네요. - _-;


Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 147
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19189
공지 [미분류] 관련 링크 2010.05.23 33820
160 [Script] 부모창 닫고 새창 띄우기 (by zero) 2004.05.13 5015
159 Show-Hide Layers(2) (by 태그매니아) 2009.02.10 8744
158 [Form] 입력 시 alt + S 먹히게 하기 2004.05.21 4853
157 [Form] 폼 이동 시(탭키 이용) 순서 정하기 (by 술도) 2004.05.21 5960
156 [미분류] 현재 필요한 팁(임시) 2004.05.22 5315
155 [HTML5] HTML 태그 그대로 노출하기 2004.05.22 8347
154 [Form] 새창에서 '확인' 누르면 부모창 리로드 시키기 (by 지진) 2004.05.22 6659
153 [HTML5] HEAD에 CSS, JS(자바스크립트), META 넣기 2004.05.24 19660
152 [PHP] <?echo($list_height)?> 의 쓰기 쉬운 변형 (by Hyunee) 2004.05.26 6150
151 [HTML5] 프레임 나누기 (좌/우, 상/하) 2004.05.28 10123
150 [Script] 웹페이지에서 특정 부분 감췄다보여주기 (by 위쯔) 2004.05.30 6008
149 [Script] 마우스를 올리면 레이어 뜨고 내리면 레이어 사라지는 스크립트 1 2004.06.08 6496
148 [CGI] Space Checker - 계정 하드용량과 DB용량 동시확인 2003.06.06 6385
147 [Form] form 태그의 기본적인 사용방법 2015.08.31 90
146 [Script] 주민등록번호 검사 스크립트 2013.09.17 0
145 [Script] 클릭하면 경고창 뜨는 스크립트 1 2004.12.14 5634
144 [Script] ~한지 **일 되었습니다 (by kihwa) 2004.12.14 4857
143 [Script] 마우스 올렸을 때 바뀌는 커서 (by kiwha) 2004.12.14 4358
142 [Script] 클릭하면 닫히는 창 2005.04.28 5501
141 [HTML5] 자바스크립트와 CSS를 넣는 방법 2005.04.28 5778