動的 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() メソッドに追加します

オンラインデモ