반응형
본 페이지 하단으로 이동 << 이 단어를 클릭하면 페이지 맨 하단으로 이동합니다.

제 블로그 방명록에 문의가 들어와서 설명 해드리겠습니다.
간단하게 이런경우 입니다. 다른 사이트와 다른 페이지로 가는게, 아니라 현재의 페이지에서 원하는 위치로 화면을 이동 시키는 기능입니다.

다시 말해서 본문을 읽다가 댓글창으로 바로 이동 시켜 보고 싶다면, 클릭시에 바로 댓글창으로 이동한다거나 혹은 배너를 보고 싶다면, 배너 위치로 화면을 이동 시킨다거나의 원리입니다.

한번더 이야기 드리면 상단은 topgogo 라고 합시다. 그리고 댓글 부분은 cogogo 라고 하고, 그리고 맨 마지막 하단은 downgogo 라고 합시다. 물론 이는 하나의 별명입니다..

내가 어떤 단어(링크)를 클릭했을때 topgogo 위치로 이동하라. 혹은 downgogo 위치로 이동하라 라는 방식을 택하는거죠~

그럼 한번 해보겠습니다.


</body> 바로 위에 아래 소스를 한줄 넣어줍니다.

</body> 안에 아래의 소스를 넣어줍니다. 아무곳에나 넣으셔도 됩니다.
만약에 블로그에 전체 적용하기 싫으면, 해당 포스트 맨 밑에 한줄로 html 로 해서 넣어줍니다.
<onclick="window.location.href">



화면으로 이동에 따라 보여줄 위치 지점에 별명을 정해 줍니다.

본 글에서 가장 맨 아래 화면으로 이동 시켜 보겠습니다. 별명은 downgogo라고 합니다.

</body> 바로 위에 아래의 소스를 넣어줍니다.
<a name="downgogo"></a>


여기까지 하셨다면 아래와 같이 될 것입니다.


<onclick="window.location.href">
<a name="downgogo"></a>
</body>


가장 맨 하단에 downgogo라고 별명을 주었습니다.

이제 어떤 특정단어를 클릭했을때 페이지 가장 하단(downgogo)로 이동을 하는걸 해볼겁니다.

저는.. 이 페이지 지금 이 자리에 해당 링크를 넣어 보겠습니다.


   <a href="#downgogo">아래로 이동</a>

본 글에서 하단으로 이동 << 이 단어를 클릭하면 페이지 맨 하단으로 이동합니다.


그럼 이제 반대로 이 페이지에서 상단으로 이동 시켜 보겠습니다.


   <a href="#topgogo">위로 이동</a>

본 글에서 상단으로 이동 << 이 단어를 클릭하면 페이지 맨 상단으로 이동합니다.


물론 위의 topgogo는 이 포스팅의 맨 상단에 비밀리에 숨어 있습니다.
어떻게요??

<a name="topgogo"></a>  라고 있습니다.

물론 이는 스킨의 skin.html이 아니더라도 똑같이 포스팅 내부적으로 가능합니다.
결국 저는 이 내용을 이 글에만 적용을 시켰습니다.

이해를 할수 있으면 응용은 어렵지 않습니다.


이 글을 클릭하면 댓글창으로 바로 이동합니다. << 클릭 해보세요!

댓글창에 비밀리에 <a name="cogogo"></a>라는 별명을 붙어 두었습니다.
그리고 바로 위의 이 글을 클릭하면 댓글창으로 바로 이동합니다의 링크에는
<a href="#cogogo">이 글을 클릭하면 댓글창으로 바로 이동합니다.</a> 라는
태그를 이용했습니다.


이쯤 되면 이해 되실까요??

이렇게 여러분이 원하곳에 별명을 붙여두고, 원하는 위치에서 클릭하면 해당 별명의 위치로 이동하는겁니다.  마지막으로 본 블로그에서 가장 최 하단 맨 마지막으로 이동 해보겠습니다.

블로그 맨 마지막 최하단으로 내려가라 클릭!!!!


반응형
홈으로
공감
Post by : 재아