jQuery는 알파벳순 페이지 인덱스를 생성합니다(IE6/7/8과 호환 가능)_jquery

WBOY

풀어 주다： 2016-05-16 17:41:26

원래의

1109명이 탐색했습니다.

대부분의 웹 개발자는 앵커 링크를 사용하여 페이지 일부로 이동하는 솔루션에 익숙할 것입니다. 앵커 링크의 특정 이름 속성을 설정하고 href 값을 해시 기호로 사용하여 페이지를 건너뛸 수 있습니다. 이 효과는 FAQ 페이지와 같이 긴 데이터 세트를 나열해야 할 때 매우 실용적입니다. 그러나 페이지 이동은 때때로 방문자에게 좋은 친구가 되지 않습니다. 클릭 한번으로 바로 점프가 되니, 낯선 방문객들은 이로 인해 혼란스러워할 수도 있고, 현재 데이터가 어디로 가는지 알 수도 없습니다,

이 튜토리얼에서는 간단한 페이지 색인을 생성하고 페이지에 앵커 링크를 사용하는 솔루션을 살펴보겠습니다. "점프" 동작은 링크 컨테이너까지 아래로 스크롤하는 애니메이션을 적용합니다. (IE6, 7, 8과 완벽하게 호환됩니다.)

预览演示截图jQuery的Javascript的滚动索引页链接

온라인 데모

레이아웃

먼저 기본 index.html 페이지에 일반적인 HTML5 문서 유형을 추가했습니다. styles.css는 페이지 스타일 시트이고 indexscroller.js는 사용자 정의된 jQuery 코드입니다.

jquery 코드를 사용할 때 Google jquery 라이브러리를 도입하는 것을 잊지 마세요. 이전 브라우저는 HTML5의 html5shiv 트렁크 라이브러리 사본을 지원하지 않습니다. 본문에서는 예술적인 CSS3 효과와 함께 맞춤 Google Webfont를 사용하고 있습니다.

코드 복사 코드는 다음과 같습니다.

  
 🎜>< ;title>jQuery 알파벳 스크롤 링크 색인 

본문 내용

알파벳순으로 나열된 앵커 링크 대상의 href 값 페이지 인덱스에 있습니다. indexa에서 #indexg까지 모두 다른 페이지의 앵커 링크에 있는 일치하는 이름 속성 값을 참조합니다.

코드 복사 코드는 다음과 같습니다.

a').on('click', function(e){
e.preventDefault();
var anchorid = $(this.hash);

if(anchorid.length == 0) anchorid = $('a[name="' this.hash.substr(1) '"]')
else anchorid = $('html');

$('html, body').animate({ scrollTop: anchorid.offset().top }, 450)
});

indexscroller.js는 여기에 있습니다. 코드가 많지 않은 것 같지만 DOM이 로드된 후 어떤 일이 발생하는지 살펴보겠습니다.
#links 내부 링크 앵커를 클릭한 직후 e.preventDefault()를 호출합니다. 이렇게 하면 URL에 추가된 페이지에서 해시가 즉시 점프하는 것을 방지할 수 있습니다. 그런 다음 새로운 jquery.hash 속성을 사용하면 href 값 다음에 해시 기호를 정확하게 가져올 수 있습니다. 예를 들어 첫 번째 인덱스 링크는 "indexa" 값을 반환합니다.

이 새로운 속성을 사용하면 해당 앵커 링크 페이지의 이름 속성을 일치시킬 수 있습니다. 위에서부터 절대 픽셀에 액세스하기 위해 anchorid.offset()을 사용하여 이 새 앵커 ID에 대한 변수를 설정했습니다. 마지막으로 이 모든 코드를 간단한 jQuery .animate() 메소드에 추가하세요

온라인 데모