jQuery はアルファベット順にわかりやすいページ インデックスを作成します (IE6/7/8 と互換性があります)_jquery

ほとんどの Web 開発者は、アンカー リンクを使用してページの一部にジャンプするソリューションに精通していると思われます。アンカー リンクの特定の name 属性を設定し、href 値をハッシュ シンボルとして使用してページをスキップできます。この効果は、たとえば、FAQ ページなどの長いデータ セットをリストする必要がある場合に非常に実用的です。ただし、ページ ジャンプは訪問者にとって好ましくない場合があります。ワンクリックで直接ジャンプできるため、慣れていない訪問者は混乱し、現在のデータがどこに行くのか分からない可能性があります。

このチュートリアルでは、単純なページ インデックスを作成し、ページ上でアンカー リンクを使用するソリューションを検討します。 「ジャンプ」アクションは、リンクのコンテナまで下にスクロールするアニメーションを表示します。 (IE6、7、8と完全互換)

オンラインデモ

レイアウト

最初は基本的なindex.htmlページで、典型的なHTML5ドキュメントタイプを追加しました。 style.css はページのスタイル シートで、indexscroller.js はカスタマイズされた jQuery コードです。

jquery コードを使用する場合は、HTML5 の html5shiv トランク ライブラリのコピーをサポートしていないので、忘れずに Google jquery ライブラリを導入してください。本文では、カスタムの Google Web フォントと芸術的な CSS3 効果を使用しています。

コードをコピーします コードは次のとおりです。

🎜>










本文コンテンツ

アルファベット順にリストされたアンカー リンク ターゲットの href 値ページインデックスにあります。 Indexa から #indexg まではすべて、他のページのアンカー リンクにある一致する name 属性値を参照します。

コードをコピー コードは次のとおりです:

動的 jQuery スクロール リンク インデックス h1>

"リンク">

クイックリンク:

="#indexa">

B

A href="#indexc">C
P>

> F P>

A>

次は、indexb という名前のアンカー リンクの具体的なスクロール コンテンツです。

A href="#indexb> ;/ A> P> 彼はこの場所にジャンプします




コードをコピーします

コードは次のとおりです:

逮捕された開発 Wikipedia - IMDB

ビッグバン セオリー Wikipedia - IMDB

CSS页面样式

いくつかの承認済みのサンプル形式テーブルの内容。典型的な CSS 再配置を除いて、私が使用するのは 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-border-radius: 5px;
境界半径: 5px;
}

各ネットワーク接続が停止する前に、他のトップにpadding-top:8pxのサイズが設定されます。いくつかの追加の空白があります

复制代码代码如下:

/* 具体的な每个ジャンプ锚链接の样式 DIV */
#shows { 表示: ブロック; }

.show {表示: ブロック;パディングトップ: 8px;マージン-ボトム: 23px; }
.meta { フォントファミリー: Arial、Verdana、サンセリフ;カラー: #222;フォントサイズ: 0.8em;フォントの太さ: 太字;フロート: 右; }

/* clearfix */
.clearfix:after { content: ".";表示: ブロック;クリア：両方。可視性: 非表示;行の高さ: 0;高さ: 0; }
.clearfix {表示: インラインブロック; }

html[xmlns] .clearfix {表示: ブロック; }
* html .clearfix { 高さ: 1%; }

さらに、エレメント情報には、スペースを節約するために各ブロックに HTML 記述が含まれています。

jQuery のスクロールトップ

jQuery には命名.scrollTop() メソッドがあり、この技術を使用すると、現在のピクセル値を他の選択された要素からリストから下に移動できます。

复制代 代码如下:

$(document).ready(function(){
$(' #links > ul > li > a').on('click', function(e){
e.preventDefault();
var anchorid = $(this.hash);
if(anchorid.length == 0) アンカー ID = $('a[name="' this.hash.substr(1) '"]');
else アンカー ID = $('html');

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


indexscroller.js はこちら。大したコードではないようですが、DOM がロードされた後に何が起こるかを見てみましょう。

#links 内部リンクアンカーをクリックした直後に、e.preventDefault() を呼び出します。これにより、ハッシュが URL に追加されたページから即座に飛び降りるのを防ぐことができます。次に、新しい jquery.hash 属性を使用すると、href 値の後のハッシュ記号を正確に取得できます。したがって、たとえば、最初のインデックス リンクは値「indexa」を返します。

この新しい属性を使用して、対応するアンカー リンク ページの name 属性と一致させることができます。この新しいアンカー ID の変数を設定し、anchorid.offset() を使用して上からの絶対ピクセルにアクセスします。最後に、このコードすべてを単純な jQuery .animate() メソッドに追加します

オンラインデモ