웹마스터 팁
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_
제목 | 글쓴이 | 날짜 |
---|---|---|
PHP 혼자 공부하기 - 8 :: 시간다루기 [18] | 행복한고니 | 2003.04.13 |
PHP 혼자 공부하기 - 9 :: 정규식 함수 [3] | 행복한고니 | 2003.04.14 |
PHP 혼자 공부하기 - 10 :: 정규식 패턴 문법 [3] | 행복한고니 | 2003.04.15 |
PHP 혼자 공부하기 - 11 :: 정규식 실전예제 [9] | 행복한고니 | 2003.04.16 |
[mics'php] 1. PHP란? [8] | TheMics | 2003.04.16 |
[mics'php] 2. PHP 사용 시스템 구축하기 [3] | TheMics | 2003.04.17 |
데이터베이스, PHP를 만나면「알짜 사이트로 부활!」 [1] | .maya | 2003.04.18 |
PHP 혼자 공부하기 - 12 :: SQL문 [6] | 행복한고니 | 2003.04.20 |
노프레임+프레임없이 접근막기+게시물 링크하기 [3] | teslaMINT | 2003.04.20 |
유용한 일반 함수 모음;ㅁ; [11] | TheMics | 2003.04.23 |
군대간 친구 남은날짜 계산하기 [6] | xacdo | 2003.04.27 |
ID3v1태그 읽는 함수입니다. [4] | 김승태 | 2003.04.27 |
if 시리즈 1탄! [15] | 씨파개 | 2003.04.28 |
PHP 확장 함수를 이용한 exif 정보 출력 [1] | NoSoRi | 2003.04.30 |
if 시리즈 2탄.. ㅡㅡ;; [9] | 씨파개 | 2003.05.05 |
mysql_fetch_row n mysql_fetch_array n mysql_fetch_object [4] | sMokaHallo | 2003.05.06 |
이미지 전용 파일업로드시의 확장자 체크시.. [4] | 특급잠수부 | 2003.05.07 |
PHP+MSSQL?(수정판) [11] | 씨파개 | 2003.05.10 |
세션파일 크기/만들어진 시간체크해서 정해진 시간이후엔 파일 지우기?;; (라고 써야되낭? ;;) [6] | 다오케이 | 2003.05.12 |
none 과 null 처리 문제 해결법 [5] | 허현승 | 2003.05.12 |