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

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

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

온라인 데모

레이아웃

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

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

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

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











본문 내용

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

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

동적 jQuery 스크롤 링크 인덱스 h1>

"링크">

• 빠른 링크: P>
• ="#indexa"> A P>
  
• B P>
• P>
  
• P>
  
• A>
• > F A>
  
• G P>
  

다음은 indexb라는 앵커 링크의 구체적인 스크롤 내용입니다.

B P> 이 곳으로 점프합니다




코드를 복사하세요

코드는 다음과 같습니다.

체포된 개발 Wikipedia< ;/a> - IMDB

빅뱅 이론 위키피디아 - IMDB

CSS页화면样式

一些默认的样式表的内容.除了典型的CSSOverload 내가 사용하는 是CSS3阴影

复代代码 代码如下:

/* 页面主要样式布局 */
#w { width: 620px; 여백: 0 자동; 패딩 상단: 55px; }

#container {
패딩: 14px 20px;
배경: #fff;
-webkit-box-shadow: 2px 2px 1px rgba(0,0,0,0.35);
-moz-box-shadow: 2px 2px 1px rgba(0,0,0,0.35);
상자 그림자: 2px 2px 1px rgba(0,0,0,0.35);
-webkit-border-radius: 5px;
-moz-국경-반경: 5px;
테두리 반경: 5px;
}

이전에 每个锚链接停止の前,지금은 padding-top:8px的大小입니다.题的顶부，有一些额외적 빈백

复主代码 代码如下:

/* 具体的每个跳转到锚链接的样式DIV */
#shows { 디스플레이: 블록; }

.show { 디스플레이: 블록; 패딩 상단: 8px; 여백 하단: 23px; }
.meta { 글꼴 계열: Arial, Verdana, sans-serif; 색상: #222; 글꼴 크기: 0.8em; 글꼴 두께: 굵게; 플로트: 오른쪽; }

/* Clearfix */
.clearfix:after { content: "."; 디스플레이: 블록; 명확함: 둘 다; 가시성: 숨김; 줄 높이: 0; 높이: 0; }
.clearfix { 디스플레이: 인라인 블록; }

html[xmlns] .clearfix { 디스플레이: 블록; }
* html .clearfix { 높이: 1%; }

此외 ，元信息包含在每个头块的HTML标记，以节省空间。所以，我们是浮动的内容，并使用CSSclearfix的布局结构。

jQuery의 스크롤탑

复代码 代码如下:

$(document).ready(function(){
$(' #links > ul > li > 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() 메소드에 추가하세요

온라인 데모