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

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

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

한번더 이야기 드리면 상단은 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 : 재아
{ ? }※ 스팸 트랙백 차단중 ...

여러분의 소중한 댓글입니다.

  1. 이전 댓글 더보기
  2. 재아님 블로그 외에도 다른 분들 블로그에서 보고

    나도 해볼까 말까 하고 있었는데 이렇게 정리해 주셔서 감사합니다.

    있으면 편하드라구요 ㅎ

    • 저도 몰랐던 사실을 알게되었고 알려주신분이 더 고맙죠~ 저도 언젠간 이 내용을 쓸까 하다가..

      정리하는게 더 오래 걸리더군요 //

      닉쑤님이야 프로니깐 ~요

  3. 저도 시간이 날 때 한 번 해봐야 겠어요^^
    유용한 정보 또 감사합니다.~~

  4. 냐하하하하하 ㅜㅜ
    한글이 아니군요;;; ㄷㄷㄷㄷ

  5. 좋은 정보 감사합니다..
    즐거운 금요일되세요.

  6. 긴 글인 경우에 유용하게 쓸 수 있을 것 같습니다.
    다만 귀차니즘이 문제이겠지요 ^^;;

  7. 웹페이지에선 많이들 애용하지만, 블로그에선 재아님이 유일한듯해요^^

    저도 귀찮아서 그냥 냅두고 있어요^^

  8. 오~클릭하니까 여기까지 금방 와버렸네요~
    이런거 너무 신기해요~ 우~와~ㅎㅎㅎ

    • 그러세요~~ 저도 신기해요~

      근데 실질적으로 잘 사용되진 않습니다

      가끔 블로그에 보면 댓글창으로 바로 이동합니다
      맨 상단으로 이동합니다.

      등의 팁들이 여럿 있습니다..

  9. 이건 긴글을쓸땐 필수같더군여 ㅋㅋ

    • 그러게 말입니다.

      그리고 댓글창을 열어놓거나 아니면 댓글이 밀려서 댓글창으로 바로 가야 할때~ 필요하기도 한듯 하네요

  10. 저도 이동버튼 만들고 설명하는 글을 썼는데, 설명하기가 너무 힘들더라고요.
    재아님은 설명이 간단하새 좋네요.
    제가 쓴 글 트랙백 보냅니다.
    http://dis1.tistory.com/211

  11. 요거 제가 필요해서 찾던 기능인데,..
    쉽고 자세히 설명해 주셨네요..감사~ 감사

  12. 와우^^ 감사합니다.
    포스팅보니까 간단하면서도 쉽게 알 듯해요. 나중에 꼭 사용해야 겠네요.^^*
    엇. 재아님 블로그에 몇 번 안와봐서 순간 모니터에 벌레가 기어다니는 줄 알고 식겁했다는..;;;^^*
    즐거운 하루 되십시오.^^*

  13. 오우~신기하네요..
    역시 컴은 잘 알고 봐야 된다는.
    워낙 컴맹인 전 어쩔려나 ;;
    좋은 정보 잘 배워 갑니다 ~

    • 생각보다 잘 활용하진 않지만. 있으면 좋겠다는 생각은 가끔 하시더군요!!

      전 적용 안했습니다.;;;
      워낙 팁이 좋아서... 대문님께 감사해야지요~~;;

      제 블로그에 문의를 하신분이 계셔서 나름대로 다시 풀어서 설명 했습니다.

  14. 아~~ 사이트제작시 사용하는 책갈피 기능을 블로그에~~
    아주 유용하게 사용할수있겠네요~
    역시 오늘도 하나 건져갑니다~~^^

    • 다른분은 책갈피 기능이라고 하긴 하시더군요!//

      뭐 비슷하긴 하지만요~

      본문에 특정 부위에 삽입 하는 방법도 가능하죠;;//

    • 아~~~~특정부분에 삽입하는건 차이가 있네요~~ㅋ

    • 별명이야 무한대로 만들어 낼수 있고,, 그 링크도 무한대로 만들어 낼수 있기때문에...

      예를들어 본문 초반에 아래에서 설명하겠지만 .이라고 쓰고 그걸 링크하고 그 아래에서 설명 부분에 별명?을 붙여 두면 클릭해서 바로 이동이 가능하겠죠~

      결국 하기가 귀찮아서 그렇죠;;;

    • 아~~그렇군요~~자세한 비교설명을 해주니..
      한방에 이해가 쏙~~됩니다~~
      나중에 한번 꼭 써먹야겠어요~~^^

  15. 어려운 html을 이해가 쉽게 정말 잘 쓰신 것 같아요. 대부분이 이해가 된다고 하시네요.

  16. 오- 챙겨두면 유용할 팁인데요?! +_+ 어떻게 써먹을지 고민해 봐야 겠어요.

  17. 블로그 상단으로 이동하는 방법이 궁금했었는데...호호호
    감사히 사용하겠습니다...

  18. 요새 들어서 재아님의 노하우 팁들이 속속들이 공개되고 있는 것 같은데요? ^^
    잘보고 갑니다~~ ㅋㅋ
    내일 내용과 포스팅도 기대 만발~ ㅋ

  19. 재밋는데요 실용 하겠습니다^^
    고마워요~~

  20. 글 잘 보고 갑니다.
    행복한 하루 되세요. ^^

  21. 정말 찾던 내용입니다~^^ 감사합니다~

댓글을 달아주세요!

티스토리 툴바