페이지 내에서 원하는 위치로 이동하기 - location.hash
페이지 정보
작성자 서방님 댓글 0건 조회 225회 작성일 07-08-08 17:50본문
페이지 내에서 원하는 위치로 이동하기 위해서는 원하는 위치에 anchor를 달아야 한다.
html 태그에서는 이를 위해 원하는 위치에 <a name="(anchor 이름)">로 닻을 단 후 참조하고자 하는 곳에서 <a href="#(anchor 이름)"으로 참조한다.
그렇다면 자바스크립트에서는 어떻게 사용할까?
location.hash를 사용하면 된다.
여기서는 location.hash에 대한 간단한 예제를 살펴보도록 하겠다.
우선 결과부터 살펴 보자.
<html>
<body>
<script>
// 원하는 위치로 이동한 후
// 그 위치의 텍스트 배경색을 변경시키는 함수
function moveToLoc(nLoc)
{
// 원하는 위치로 이동
location.hash=document.myform.loc.value
// 원하는 위치로 이동한 후 그 부분으로 이동했다는 것을
// 보여주기 위해 텍스트의 배경색을 변경하는 과정.
// location.hash와는 상관 없이 주목을 끌기 위해 삽입한 코드임
var aSpan = document.all ? eval("document.all.span" + nLoc) : document.getElementById ?document.getElementById(span+'nLoc') : null;
aSpan.style.backgroundColor='orange';
}
</script>
<a name='top2'>
<form name="myform">
<input type="button" value="결과 아래로" onclick="location.hash='bottom2'"><br>
원하는 위치의 번호 (예: 5 ) : <input type="text" name="loc" value="12">
<input type="button" value="원하는 위치로 이동" onclick=moveToLoc(document.myform.loc.value)>
</form>
<script>
for (i=1; i<=20; i++)
document.write("<li><a name='" + i + "'></a><span id='span" + i + "'>" + i + "번 째 위치입니다.</span></li><br><br>")
</script>
<a name='bottom2'>
<input type="button" value="결과 위로" onclick="location.hash='top2'">
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
