메뉴 보이기
Profile
이온디

2014.09.29

Script

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

조회 수 1367 추천 수 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 112
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19184
공지 [미분류] 관련 링크 2010.05.23 33801
160 [HTML5] HTML 태그 그대로 노출하기 2004.05.22 8346
159 [Script] 접속 시 자동으로 새창 띄우고, 띄워져 있으면 새로고침해도 안 띄우기 (by Aquatype) 2004.05.06 4745
158 [미분류] 현재 필요한 팁(임시) 2004.05.22 5313
157 [Script] body에 2개 이상의 인자 띄우기 2004.04.27 5665
156 [PHP] <?echo($list_height)?> 의 쓰기 쉬운 변형 (by Hyunee) 2004.05.26 6108
155 [HTML5] 작은 창으로 새창 열기 2 2004.04.25 7210
154 [HTML5] 프레임 나누기 (좌/우, 상/하) 2004.05.28 10090
153 [Script] 게시판 등 에서 웹페이지에서 특정 부분 감췄다보여주기 - 레이어 토글 1 2004.06.04 13647
152 [Script] 클릭하면 닫히는 창 2005.04.28 5501
151 [Script] 클릭하면 경고창 뜨는 스크립트 1 2004.12.14 5627
150 [HTML5] 폼 이미지로 보이기 2003.08.10 5801
149 [HTML5] [질문] 폼 타겟 지정하기 2004.04.24 6394
148 [Form] 폼 입력 시 글자 제한하기 2003.12.21 6147
147 [PHP] 페이지 접속 암호화 2003.09.25 6674
146 [Form] 폼 이동 시(탭키 이용) 순서 정하기 (by 술도) 2004.05.21 5951
145 [Script] ~한지 **일 되었습니다 (by kihwa) 2004.12.14 4857
144 [PHP] 퍼미션 변경 2004.05.08 6114
143 [CGI] Space Checker - 계정 하드용량과 DB용량 동시확인 2003.06.06 6380
142 [Script] 글자 크기 바꾸기 2003.07.23 5107
141 [HTML5] 레이어1은 보이고 레이어2는 감추기 2 2004.04.23 5503