집 >웹 프론트엔드 >JS 튜토리얼 >JS를 사용하여 페이지에서 빠른 위치를 지정하는 방법(앵커 점프 문제)

JS를 사용하여 페이지에서 빠른 위치를 지정하는 방법(앵커 점프 문제)

韦小宝원래의: 2018-01-22 09:58:012279검색

이 글은 JS가 페이지에서 어떻게 빠른 위치를 잡을 수 있는지(앵커 점프 문제)를 주로 소개합니다. JS를 배우는 데 있어 참고할 만한 가치가 있습니다. JS에 관심이 있는 친구들은 이 글을 참고하세요

1. 앵커 포인트 소개 jump

앵커 포인트는 실제로 페이지를 특정 위치에 배치할 수 있게 해주는 포인트입니다. 더 큰 페이지에서 자주 볼 수 있습니다.

앵커 점프에는 두 가지 형태가 있습니다.

a 태그 + 이름 / href 속성
태그의 id 속성 사용

html 4.0 이전에는 3499910bf9dac5ae3c52d5ede7383485 조각 식별자를 생성하려면 이름 속성이 필요합니다. id 속성이 있으면 모든 HTML 또는 XHTML 요소가 조각 식별자가 될 수 있습니다. id 식별자는 거의 모든 태그에 사용될 수 있기 때문입니다. 3499910bf9dac5ae3c52d5ede7383485 태그는 이전 버전과의 호환성을 위해 name 속성을 유지하지만 id 속성을 사용할 수도 있습니다. 이러한 속성은 서로 바꿔서 사용할 수 있으며 id 속성은 name 속성의 업그레이드된 버전으로 생각할 수 있습니다. name 및 id 속성은 모두 href 속성과 함께 사용할 수 있으므로 3499910bf9dac5ae3c52d5ede7383485 태그를 hyperlink 및 조각 식별자로 사용할 수 있습니다.

<a href="#he" rel="external nofollow" rel="external nofollow" >波轮洗衣机介绍</a>
<a href="#f" rel="external nofollow" ></a>

하지만 이 방법은 빈 태그를 사용하기 때문에 앵커 포인트가 실패하는 경우도 있습니다. 따라서 앵커 포인트를 바인딩하려면 ID를 사용하는 것이 좋습니다. 코드는 다음과 같습니다.

<a href="#he" rel="external nofollow" rel="external nofollow" >波轮洗衣机介绍</a><h2 id="#de">波轮洗衣机介绍</h2>

2. 앵커 포인트 점프가 포함된 URL 주소

window.location.hash

【1】About #

페이지의 에서 "#" 기호는 매우 일반적이고 보편적입니다. 기본적으로 이는 ID 선택기를 의미합니다. 마찬가지로 페이지의 URL에서 #은 id 선택기로 이해될 수도 있습니다. 즉, 페이지가 가리키는 URL이 포함된 id 태그로 이동합니다.

이 주소 끝에 '#'이 있는데 이는 브라우저에 점프하라고 지시하는 것과 같습니다. 3 뒤에 #이 있으면 http://www.php.cn/view/121416에 있다는 의미입니다. .htm?p =1 #3의 특성과 일치하는 태그를 검색하고 점프를 수행합니다.

【2】빈 앵커 포인트에 대하여

URL에서 # 뒤에 오는 문자 ID를 텍스트에서 찾을 수 없는 경우 두 가지 상황이 발생합니다. URL 주소가 변경된 경우를 제외하고 현재 페이지에 있는 경우입니다. , 다른 페이지는 변경되지 않으며 페이지가 다른 페이지에서 점프하면 페이지가 맨 위에 표시되며 '#'은 기본적으로 장식입니다.

【3】window.location.hash

3. Jquery에서 앵커 포인트를 부드럽게 점프합니다.

페이지가 box라는 ID를 가진 요소로 부드럽게 스크롤되도록 하면 JQuery 코드에는 한 문장만 필요하며 키 위치는 다음과 같습니다.

$(&#39;html, body&#39;).animate({scrollTop: $(&#39;#box&#39;).offset().top}, 1000)

JS 기본 구현입니다.

scrollTo() 메서드는 콘텐츠를 지정된 좌표로 스크롤할 수 있습니다.

scrollTo(xpos,ypos);

4. IE에서의 앵커 포인트 새로 고침 실패 및 JQuery에서의 솔루션

[1]앵커 포인트 새로 고침 실패 정보

앵커 포인트 새로 고침 실패는 URL이 다음에는 앵커 포인트가 있으며 이 앵커 포인트도 효과가 없습니다.

【2】Jquery에서는 구현이 어렵지 않습니다. 해당 앵커 포인트 개체 를 추가로 얻기 위해 URL을 기반으로 앵커 포인트를 얻은 다음 페이지의 스크롤 높이를 페이지 상단의 오프셋 값

으로 설정할 수 있습니다. 이렇게 하면 페이지가 다시 로드되거나 새로 고쳐지더라도 뒤에 있는 앵커 포인트가 작동하게 됩니다.

$(function() {
  var url = window.location.toString();
  var id = url.split(&#39;#&#39;)[1];
  if (id) {
    var t = $(&#39;#&#39; + id).offset().top;
    $(window).scrollTop(t);
  }
})

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다! !

JS를 사용하여 페이지에서 빠른 위치를 지정하는 방법(앵커 점프 문제)

관련 기사