블로그 상,하단 이동하기 - 앵커(anchor) 활용하기
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^
블로그에서 상.하단으로 쉽게 이동하는 법은 몇가지 있습니다. 간단하게 떠블클릭으로 가는 방법, 스크립트를 이용한 위로이동 단추를 만드는 방법 등 여러가지 다양한 방법이 있습니다.
이 글에서 상,하단 이동하는 소스는 앵커(anchor)를 이용한 방법입니다. 앵커를 이용하면 원하는곳으로 정확히 이동이 가능합니다.
제 블로그에도 적용되있는데요. 제목 위에 보시면 [댓글창으로 이동] 이 있습니다. 눌러보시면 댓글창으로 이동합니다. 그리고 댓글창 아래에 [위로 이동]이 있는데 누르면 본문 광고까지만 올라 갑니다.
이렇게 원하는 지점을 정해주고 이동할수있어서 편리합니다.
<a name="listmain"></a> - (이동을 원하는 지점 표시하는곳)
<a href="#listmain">[위로이동]</a> - (이동 글을 보여 주는곳)
<a name="commentBot"></a> - (이동을 원하는 지점 표시하는곳)
<a href="#commentBot">[댓글창으로 이동]</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>
<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
간단하게 상,하단 이동이 가능하게 만들어 봤습니다. 설명이 부실하네요. 갑자기 중요한 약속이 잡혀서 글 마무리 합니다.^^
저는 컨트롤 + F하면 <div class="article">가 2개 나오는데
<포스트 본문 내용> 밑의 <div class="article">인가요??
아니면
<!-- 공지사항글 -->
<s_notice_rep>
<div class="entryNotice">
<div class="titleWrap">
<h2><a href=""></a></h2>
<span class="category">공지사항 : </span><span class="date"></span>
</div>
<div class="article">
</div>
</div><!-- close entryNotice -->
</s_notice_rep>
-------------------------------
이거에 <div class="article"> 인가요?? ㅠㅠ