┏━━━━┳━━━━━━━━━━━━━━━━━━━━━━━━━
┃０００１┃홈페이지 ＴＯＰ 버튼 ＋ 응용
┗━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 서문:
TOP 버튼을 구현하는 방법은 상당히 여러 가지가 있습니다만, 그 중에서 가장 많이 쓰이는 방법은 <a href="#">TOP</a> 이라 생각합니다. 여러 가지 이유가 있겠지만, 역시 간단하는 것 때문이겠죠.
일반적인 TOP버튼이라면 <a> 태그를 이용하는 것이 효율적이겠지만, JavaScript를 이용해서 TOP 버튼 구현하게 되면, 여러 가지 효과를 줄 수 있기 때문에, 조금 더 멋진 사이트를 만들 수 있게 됩니다.
아래 소스는 scroll 함수를 이용해서 구현한 TOP 버튼, 그리고 그 응용작들입니다.
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 소스:
<script type="text/javascript">
<!--
function to_top() // TOP 버튼을 위한 함수
{
scroll (0, 0); // 스크롤을 0, 0으로 지정합니다.
}
function to_bottom() // 응용: 페이지 가장 아래로 가는 버튼을 위한 함수
{
var maxy = document.body.scrollHeight; // 페이지의 총 상하스크롤 길이를 구합니다
scroll (0, maxy); // 스크롤을 0, maxy로 지정합니다.
}
function to_top_constant() // 응용: 일정한 속도 + TOP
{
var x = document.body.scrollLeft; // 페이지의 좌우스크롤 위치를 구합니다.
var y = document.body.scrollTop; // 페이지의 상하스크롤 위치를 구합니다.
var speed = 1; // 스크롤 속도를 지정합니다. (클수록 빠름)
while ((x != 0) || (y != 0)) { // 스크롤 위치가 0이 될 때까지 반복합니다
scroll (x, y); // 지정된 x, y 스크롤로 이동합니다.
x -= speed; // 좌우스크롤 위치가 0에 가깝게 되도록 스크롤 속도만큼 빼줍니다.
y -= speed; // 상하스크롤 위치가 0에 가깝게 되도록 스크롤 속도만큼 빼줍니다
if (x < 0) x = 0; // 만약 좌우스크롤 위치가 0보다 작아지면, 0으로 돌려줍니다.
if (y < 0) y = 0; // 만약 상하스크롤 위치가 0보다 작아지면, 0으로 돌려줍니다.
}
scroll (0, 0); // 마지막으로 스크롤을 0, 0으로 이동시킵니다.
}
function to_bottom_constant() // 응용: 일정한 속도 + BOTTOM
{
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var maxy = document.body.scrollHeight;
var speed = 1;
while ((x != 0) || (y != maxy)) { // 좌우스크롤 위치가 0이 될 때까지,
scroll (x, y); // 상하스크롤 위치가 maxy가 될 때까지 반복합니다.
x -= speed;
y += speed; // 상하스크롤 위치를 스크롤 속도만큼 증가시켜 줍니다.
if (x < 0) x = 0;
if (y > maxy) y = maxy; // 상하스크롤 위치가 maxy를 넘었을 경우 maxy로 돌려줍니다.
}
scroll (0, maxy); // 마지막으로 스크롤을 0, maxy로 이동시킵니다.
}
function to_top_smooth() // 응용: 가속도 TOP
{
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)){ // 상하스크롤이 0에 도착하면.
while ((y != bounce)) { // 상하스크롤이 bounce 값까지 되도록 반복합니다.
scroll (x, y);
speed -= (speed * speed / 100); // 중력?에 의해서 속도는 감소하도록 합니다.
x -= speed;
y += speed;
if (x < 0) x = 0;
if (y > bounce) y = bounce; // y 값이 bounce보다, 커지면 bounce로 돌려줍니다.
}
scroll (0, bounce); // 스크롤을 0, bounce로 이동 시킵니다.
bounce /= 1.5; // bounce 높이를 줄여줍니다.
}
if (x < 0) x = 0;
if (y < 0) y = 0;
}
scroll (0, 0);
}
//-->
</script>
<span onclick="to_top();">↑TOP</span> // TOP 버튼 연결 예제
<span onclick="to_bottom();">↓BOTTOM</span> // BOTTOM 버튼 연결 예제
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┗ 적용:
자바스크립트는 <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개 정도일 것입니다. 쓰지 않는 함수의 경우는 삭제하고 사용하세요.
추천 : 