웹마스터 팁
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_
제목 | 글쓴이 | 날짜 |
---|---|---|
1.2.0 설치 후 페이지모듈에 위젯사용시 문제 [2] | Digitalife | 2009.03.17 |
관리자 페이지 (module=admin) 백지 문제 [5] | 개돌 | 2009.03.17 |
외부페이지 또는 파일링크시 글자깨짐 현상 [1] | 소백산 | 2009.01.31 |
페이지 모듈에도 게시판제목 처럼 다는 쉬운방법... [2] | 만쓰별(정만) | 2009.01.23 |
1.1.5 이후 버전 업데이트후 외부페이지에서 다음위젯이 표시안될때~ [3] | 정박사닷컴 | 2009.01.23 |
메인 페이지가 백지로 나올 때 이렇게 해보세요. [4] | 시금치 | 2008.12.23 |
자신의 홈페이지에 플래시 오락실을 등록 해보자. [2] | 조성우371 | 2008.12.20 |
서브홈페이지 만들기 [5] | 가리사니 | 2008.12.09 |
홈페이지의 아이콘(favicon)이 어느날 갑자기 사라졌을때... [1] | 크르르 | 2008.11.28 |
[설문조사] 메인페이지에 넣기와 효율적으로 관리하기 [6] | 빨간발 | 2008.11.27 |
일반 페이지에 로그인(세션) 정보 활용하기 [13] | noirzo | 2008.11.07 |
cafe24사용자중 페이지에서 위젯편집시 자바스크립트 에러나시는 분들 [8] | 팔공산 | 2008.10.17 |
주소록 구현 (외부 페이지) [17] | CSLab | 2008.09.15 |
블로그, 홈페이지 가입시 자동 입력되는 http:// 없애기 [2] | 류영무 | 2008.09.09 |
동일서버내 페이지에서 로그인정보 활용하기... [4] | 수로 | 2008.09.06 |
[우클릭 및 드레그 방지법] 및 [방지된 홈페이지 해재법] >0< [7] | 이홍석295 | 2008.09.03 |
각 리스트형 위젯에 페이지 기능을 달자. [10] | 라르게덴 | 2008.09.02 |
밑에 페이지 네비게이션 수정 (다음10개, 이전10개등으로) [6] | Clanss | 2008.08.29 |
한 페이지(화면)에 두개(2개)의 모듈(게시판 등)을 넣는 법 [6] | 황건순 | 2008.08.25 |
[팁]페이지별 댓글 출력 초간단 팁.. [4] | 키티나 | 2008.07.04 |