블로그 특정 위치로 스크롤링 시키는 간단 자바스크립트

- 언제쓸까?

블로그의 긴긴 글에서 특정위치로 스크롤링 하는 버튼 또는 이미지를 만들어서 쉽게 이동하도록 하자

 

- 방법

1)Tistroy의 경우 글을 쓸때 에디터에서 기본모드->HTML로 변경한다.

2) 배경색이 달라지는데 그곳의 최상단에 아래와 같은 코드를 넣자. 그러면 그 페이지가 호출될 때 아래의 스크립트가 실행되며 스크롤링을 위한 준비가 완료된다. 

<script type="text/javascript" src="&lt;/script'&gt;http://code.jquery.com/jquery-latest.js"></script>
<script>
 function fnMove(seq){
  var offset = $("#div" + seq).offset();
  $('html, body').animate({scrollTop : offset.top-60/*스크롤된 위치에서 상단네비 길이만큼 -60*/}, 400/*스크롤시간*/); }
</script>

 

3) 특정위치로 이동시키는 버튼을 넣자. 이렇게 보인다. 한번 눌러보자 ↓ 

 

<button onClick="fnMove('1')">div1로 이동</button>

여러개를 하고 싶으면 fnMove('1')의 숫자를 1,2,3... 이렇게 늘리고 4번의 id="div1"의 숫자도 1,2,3...이렇게 늘리면 된다. 

 

4) 이제 스크롤링이 될 곳에 이렇게 넣는다. 

<div id="div1">

<-위 div1으로 이동 버튼을 누르면 이곳이 가장 위로 스크롤링 되어 옵니다.

귀찮아서 다는 안적지만 3번은 버튼이든 이미지든 Click이벤트가 먹히는 어느것이든 되고,

4번은 div가 중요한게 아닌 id="div1"이 중요하다 어느 엘리먼트든 id="div1"을 넣으면 된다.

 

[출처] jquery html 특정 위치로 스크롤링 시키기|작성자 루브넷