1

HTML ページの下部にインライン リンクがあります。ユーザーがリンクをクリックすると、ページがトップに移動します。これを作成すると動作します: scroll(0,0); return false;. しかし、JavaScript の結果は好みません。div とアンカーへのリンクを作成しました。しかし、うまくいきませんでした：

<div id="a1" class="navbar navbar-inverse navbar-fixed-top">
     <div id="a2" class="navbar-inner">
    </div>
</div>

<a href="#" id="a3">XYZXYZ</a>
<a href="#a3" id="link3">go to top 3</a><br><br>

このフィドルを確認してください: http://jsfiddle.net/BtGEx/4/ 「トップ 2 に移動」は機能しますが、「トップ 1 に移動」は機能しません。

4

3 に答える 3

2

名前付きアンカーを使用して、ページ内でリンクできます。

たとえば、タグ<a name="top"></a>のすぐ下に配置できます。<body>

下部にリンクを作成します<a href="#top">Go to the top</a>。

これがあなたの言いたいことだと思います。

編集、

HTML5 を使用する場合は、名前付きアンカーを使用しないでください。代わりにグローバル ID を使用してください。パブロフのコメントのリンクをチェックしてください！

編集（右のフィドルが表示されます）

あなたnavbarは固定位置に配置されているため、DOMの外側にあります。リンクは正常に機能し、ページをその位置までスクロールします。CSS の HTML には、ナビゲーション バーの下にスクロールする解決策はありません。

ただし、JQuery を使用することはできます。アンカーの位置を決定し、navbar の高さを y 値に追加します。

幸運を！

于 2013-09-19T13:36:18.217 に答える
0

このフィドルのように、「false top」divをお勧めします

これをナビゲーションバーの下に追加できます：

<!--false top, also provides the "body padding" -->
<div id="div1"/>

そしてこれをあなたのCSSに：

#div1 {
    padding-top: 70px;
}

最後に、一番下のリンク 1 が に移動し#divます。

于 2013-09-20T13:45:42.200 に答える
0

jsフィドルを見ています。「トップに移動」は期待どおりに機能しています。リンクにジャンプしてページのトップにリンクを貼る設定です。たまたま、画面上部にあるリンクがナビゲーション バーの後ろにある場合があります。

jsフィドルを修正するには、追加した本文のパディングと同じパディングをリンクに追加するだけです

#a1 {
    padding-top: 70px;
}

これで、一番上までスクロールするように見えますが、リンクはナビゲーション バーの後ろに隠れません。 http://jsfiddle.net/hajpoj/BtGEx/1/

于 2013-09-19T16:17:51.580 に答える