웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
홈페이지 TOP 버튼 만들기 + 응용 [0001]
2005.01.15 23:56
┏━━━━┳━━━━━━━━━━━━━━━━━━━━━━━━━
┃0001┃홈페이지 TOP 버튼 + 응용
┗━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 서문:
TOP 버튼을 구현하는 방법은 상당히 여러 가지가 있습니다만, 그 중에서 가장 많이 쓰이는 방법은 <a href="#">TOP</a> 이라 생각합니다. 여러 가지 이유가 있겠지만, 역시 간단하는 것 때문이겠죠.
일반적인 TOP버튼이라면 <a> 태그를 이용하는 것이 효율적이겠지만, JavaScript를 이용해서 TOP 버튼 구현하게 되면, 여러 가지 효과를 줄 수 있기 때문에, 조금 더 멋진 사이트를 만들 수 있게 됩니다.
아래 소스는 scroll 함수를 이용해서 구현한 TOP 버튼, 그리고 그 응용작들입니다.
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 예제: http://edene.com/nzeo/java/?no=0001&mode=example
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 소스: http://edene.com/nzeo/java/?no=0001&mode=source
<script type="text/javascript">
<!--
function to_top()
{
scroll (0, 0);
}
function to_bottom()
{
var maxy = document.body.scrollHeight;
scroll (0, maxy);
}
function to_top_constant()
{
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var speed = 1;
while ((x != 0) || (y != 0)) {
scroll (x, y);
x -= speed;
y -= speed;
if (x < 0) x = 0;
if (y < 0) y = 0;
}
scroll (0, 0);
}
function to_bottom_constant()
{
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var maxy = document.body.scrollHeight;
var speed = 1;
while ((x != 0) || (y != maxy)) {
scroll (x, y);
x -= speed;
y += speed;
if (x < 0) x = 0;
if (y > maxy) y = maxy;
}
scroll (0, maxy);
}
function to_top_smooth()
{
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var speed = 1;
while ((x != 0) || (y != 0)) {
scroll (x, y);
speed += (speed * speed / 100);
x -= speed;
y -= speed;
if (x < 0) x = 0;
if (y < 0) y = 0;
}
scroll (0, 0);
}
function to_top_bounce()
{
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var speed = 1;
var bounce = 300;
while ((x != 0) || (y != 0)) {
scroll (x, y);
if (speed < 5) speed += (speed * speed / 100);
x -= speed;
y -= speed;
if ((y < 0) && (bounce > 50)){
while ((y != bounce)) {
scroll (x, y);
speed -= (speed * speed / 100);
x -= speed;
y += speed;
if (x < 0) x = 0;
if (y > bounce) y = bounce;
}
scroll (0, bounce);
bounce /= 1.5;
}
if (x < 0) x = 0;
if (y < 0) y = 0;
}
scroll (0, 0);
}
//-->
</script>
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 적용:
자바스크립트는 <a> 태크를 이용해서 연결해줄 수도 있지만, 이벤트를 이용해서 부르는 것이 더 효율적입니다.
예: <span onclick="to_top();">↑TOP</span>
위와 같이 클릭했을 때 함수를 부르게 되는 것이죠.
<span> 태그 외에도 <font>, <div>, <p>, <img> 등 거의 모든 태크에 적용이 가능합니다.
예: <img src="top.gif" onclick="to_top();"></img>
하지만 <a> 태그가 아니면 하이퍼링크로 처리되지 않기 때문에 마우스포인터가 손으로 변하지 않습니다.
따라서 스타일 속성을 조금 건들여주시면 됩니다.
예: <span onclick="to_top();" style="CURSOR: hand">↑TOP</span>
위와 같이 하시면 TOP위에 올렸을 때에, 마우스포인터가 손으로 변하게 됩니다.
물론 다른 태크에도 적용이 가능합니다.
예: <img src="top.gif" onclick="to_top();" style="cursor:pointer"></img>
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 알림:
소스에는 총 6개의 함수가 있지만, 아마 실제로 쓰실 것은 1, 2개 정도일 것입니다. 쓰지 않는 함수의 경우는 삭제하고 사용하세요.
소스페이지에 가시면 자세하게 주석을 달아두었으니, 이해가 안되시는 분들은 참고하도록 하세요.
┃0001┃홈페이지 TOP 버튼 + 응용
┗━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 서문:
TOP 버튼을 구현하는 방법은 상당히 여러 가지가 있습니다만, 그 중에서 가장 많이 쓰이는 방법은 <a href="#">TOP</a> 이라 생각합니다. 여러 가지 이유가 있겠지만, 역시 간단하는 것 때문이겠죠.
일반적인 TOP버튼이라면 <a> 태그를 이용하는 것이 효율적이겠지만, JavaScript를 이용해서 TOP 버튼 구현하게 되면, 여러 가지 효과를 줄 수 있기 때문에, 조금 더 멋진 사이트를 만들 수 있게 됩니다.
아래 소스는 scroll 함수를 이용해서 구현한 TOP 버튼, 그리고 그 응용작들입니다.
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 예제: http://edene.com/nzeo/java/?no=0001&mode=example
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 소스: http://edene.com/nzeo/java/?no=0001&mode=source
<script type="text/javascript">
<!--
function to_top()
{
scroll (0, 0);
}
function to_bottom()
{
var maxy = document.body.scrollHeight;
scroll (0, maxy);
}
function to_top_constant()
{
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var speed = 1;
while ((x != 0) || (y != 0)) {
scroll (x, y);
x -= speed;
y -= speed;
if (x < 0) x = 0;
if (y < 0) y = 0;
}
scroll (0, 0);
}
function to_bottom_constant()
{
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var maxy = document.body.scrollHeight;
var speed = 1;
while ((x != 0) || (y != maxy)) {
scroll (x, y);
x -= speed;
y += speed;
if (x < 0) x = 0;
if (y > maxy) y = maxy;
}
scroll (0, maxy);
}
function to_top_smooth()
{
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var speed = 1;
while ((x != 0) || (y != 0)) {
scroll (x, y);
speed += (speed * speed / 100);
x -= speed;
y -= speed;
if (x < 0) x = 0;
if (y < 0) y = 0;
}
scroll (0, 0);
}
function to_top_bounce()
{
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var speed = 1;
var bounce = 300;
while ((x != 0) || (y != 0)) {
scroll (x, y);
if (speed < 5) speed += (speed * speed / 100);
x -= speed;
y -= speed;
if ((y < 0) && (bounce > 50)){
while ((y != bounce)) {
scroll (x, y);
speed -= (speed * speed / 100);
x -= speed;
y += speed;
if (x < 0) x = 0;
if (y > bounce) y = bounce;
}
scroll (0, bounce);
bounce /= 1.5;
}
if (x < 0) x = 0;
if (y < 0) y = 0;
}
scroll (0, 0);
}
//-->
</script>
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 적용:
자바스크립트는 <a> 태크를 이용해서 연결해줄 수도 있지만, 이벤트를 이용해서 부르는 것이 더 효율적입니다.
예: <span onclick="to_top();">↑TOP</span>
위와 같이 클릭했을 때 함수를 부르게 되는 것이죠.
<span> 태그 외에도 <font>, <div>, <p>, <img> 등 거의 모든 태크에 적용이 가능합니다.
예: <img src="top.gif" onclick="to_top();"></img>
하지만 <a> 태그가 아니면 하이퍼링크로 처리되지 않기 때문에 마우스포인터가 손으로 변하지 않습니다.
따라서 스타일 속성을 조금 건들여주시면 됩니다.
예: <span onclick="to_top();" style="CURSOR: hand">↑TOP</span>
위와 같이 하시면 TOP위에 올렸을 때에, 마우스포인터가 손으로 변하게 됩니다.
물론 다른 태크에도 적용이 가능합니다.
예: <img src="top.gif" onclick="to_top();" style="cursor:pointer"></img>
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 알림:
소스에는 총 6개의 함수가 있지만, 아마 실제로 쓰실 것은 1, 2개 정도일 것입니다. 쓰지 않는 함수의 경우는 삭제하고 사용하세요.
소스페이지에 가시면 자세하게 주석을 달아두었으니, 이해가 안되시는 분들은 참고하도록 하세요.
댓글 2
-
없음
2005.01.21 09:48
오,. 멋지네요 -
지용남
2005.02.20 19:00
멋지긴 한데.... 어디에다가 써야 할지를 모르겠습니다. on_
제목 | 글쓴이 | 날짜 |
---|---|---|
톡톡 튀는 홈페이지 테이블 제작하기 ^^ [6] | piasol | 2004.12.03 |
페이지 회색스크롤바로 바꾸기 | 편입성공기 | 2004.12.06 |
도메인 포워딩 즉 페이지 자동이동하기 [6] | 편입성공기 | 2004.12.06 |
[기초]홈페이지의 프레임 나누기 입니다. [5] | piasol | 2004.12.10 |
FTP로 홈페이지 출판하기 | 어린공주 | 2005.09.30 |
[동영상강좌] 노프레임 홈페이지만들기 [8] | 꼬냐닷컴 | 2005.10.02 |
제 홈페이지 분석(뭐징?) [5] | 박현우 | 2006.03.11 |
페이지 자동 이동 태그입니다. | 인테리어뱅크 | 2006.04.10 |
'검색'창에 페이지 띄우기 [8] | KLclub | 2006.05.14 |
시작페이지 만들기 [1] | 정재선 | 2006.06.16 |
프레임 홈페이지 만들때 유용한 팁 [2] | 지오 | 2007.03.24 |
page에 웹페이지의 보드(게시판 ) 삽입 [2] | parkys | 2007.10.24 |
노프레임 홈페이지 만들기 강좌
![]() | H.N커뮤니티 | 2009.02.28 |
자신의 홈페이지에 웹문서 검색엔진 장착하기 [4] | 지하넷 | 2009.05.04 |
[Tip] 페이지 이동중이라고 표시해보자~ ^_^ [10] | BiHon | 2001.03.28 |
페이지마다 타이틀 변경하기 [3] | WOWpc | 2001.10.10 |
[JavaScript] 랜덤 듀레이션 효과 - 페이지 들어오고 나갈때 벗겨지는 효과 보여주기 [1] | SM | 2002.02.24 |
[JavaScript] 전체화면으로 페이지 열기 [2] | SM | 2002.02.24 |
▩찾기 기능을 내 홈페이지에 넣어보자 [1] | ▩윤미 | 2002.02.26 |
페이지 사용안하고 팝업띄우기
[4]
![]() | 란즈 | 2002.03.02 |