블로그 상,하단 이동하기 - 앵커(anchor) 활용하기

블로그에서 상.하단으로 쉽게 이동하는 법은 몇가지 있습니다. 간단하게 떠블클릭으로 가는 방법, 스크립트를 이용한 위로이동 단추를 만드는 방법 등 여러가지 다양한 방법이 있습니다.

 

이 글에서 상,하단 이동하는 소스는 앵커(anchor)를 이용한 방법입니다. 앵커를 이용하면 원하는곳으로 정확히 이동이 가능합니다.

 

제 블로그에도 적용되있는데요. 제목 위에 보시면 [댓글창으로 이동] 이 있습니다. 눌러보시면 댓글창으로 이동합니다. 그리고 댓글창 아래에 [위로 이동]이 있는데 누르면 본문 광고까지만 올라 갑니다.

 

이렇게 원하는 지점을 정해주고 이동할수있어서 편리합니다.

 

 

<a name="listmain"></a>                                   -  (이동을 원하는 지점 표시하는곳)
<a href="#listmain">[위로이동]</a>                    -  (이동 글을 보여 주는곳)
<a name="commentBot"></a>                            -  (이동을 원하는 지점 표시하는곳)
<a href="#commentBot">[댓글창으로 이동]</a>   -  (이동 글을 보여 주는곳)

 

제가 사용한 소스 입니다. 이동할곳을 지정해 주고 지정한곳으로 이동 글을 보여주면 됩니다.

 

블로그 관리 -> 꾸미기 -> HTML/CSS 폅집을 선택하셔서 Ctrl + F로 <div class="article">을 검색합니다. <div class="article"> 아래에 <a name="listmain"></a> 를 넣주시고 <a href="#listmain">[위로이동]</a> 을 보여줄 하단쪽에 넣어주시면 됩니다.

 

   <p>
  <textarea name="[##_rp_input_comment_##]" rows="6" cols="50"></textarea>
  <a name="commentBot"></a>
 </p>
   <p class="button"><a href="#listmain"><font color="#A9A79D">[위로이동]  </a></font><input type="submit" value="댓글 달기" onclick="[##_rp_onclick_submit_##]" class="submit" /></p> </div>
 </s_rp_input_form>

전 댓글 창에 달았습니다.^^

 

상,하단 이동 소스는 사용자마다 필요한곳에 넣어 사용하면 되는 소스라 어느곳에 넣으시라고 말씀을 못드립니다. 필요하다 생각되는곳에 넣으시면 됩니다.

 

앵커.txt      

 

간단하게 상,하단 이동이 가능하게 만들어 봤습니다. 설명이 부실하네요. 갑자기 중요한 약속이 잡혀서 글 마무리 합니다.^^

저작자표시비영리변경금지