프로그래밍 공부 일기

2020년 6월 1일 Progate Lv.83

페이지에서 링크 만들기

a 태그로 만들기

<a> 태그는 다른 페이지의 링크가 아니고, 페이지내의 링크를 만들 수도 있다. <a> 태그의 href 속성에 "#id名"를 추가하면 <a> 태그를 클릭하면 해당 id의 요소가 표시되는 곳으로 이동합니다.

<a href="#conetnt">...</a>
<div id="content">...<div>

scrollTop 메서드

페이지내 링크는 jQurey에서도 구현할 수 있다. jQuery로 구현하면 링크 대상으로의 이동에 애니메이션을 붙일 수 있다. $('html body').scrollTop(値); 와 같이 설정해, 페이지의 최상부로부터의 값 px 의 위치로 이동할 수 있다.

$('#top-btn').click(function(){
  $('html body').scrollTop(0);  //スクロールされている部分の距離が0=ページ最上部
});

네비게이션 만들기

　 누른 버튼에 따라 임의의 위치까지 자동으로 스크롤

offset 메서드 만들기

offset 메소드는 요소의 위치를 ​​취득할 수 있다. 페이지의 상단으로부터의 거리와 페이지의 좌단으로부터의 거리가 연상 배열의 형태로 돌아온다. offset().top 그러면 페이지 상단으로부터의 거리를 취득할 수 있다.

h1 요소의 표시 위치 얻기

$('h1').offset();   //{top:180, left:100}

페이지 상단에서 h1 요소의 거리를 가져옵니다.

$('h1').offset().top;  //180

attr 메소드로 비행 목적지 취득

각 버튼은 a 태그를 사용하여 href 속성으로 날아갈 id 이름을 지정합니다. 클릭했을 때에 attr 메소드로 href 속성의 값을 취득해, offset 메소드로 그 위치를 취득하는 것으로 페이지내 링크를 구현한다.

<a class="scroll-btn" href="#html">HTML</a>
....
<div id="html">....</div>

$('.scroll-btn').click(function(){
  var id=$(this).attr('href');     //クリックしたボタンの飛び先を取得
  var position=$(id).attr('href'); //飛び先の最上部からの距離を取得
});