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。确定锚点的位置并将导航栏的高度添加到 y 值。

祝你好运！

于 2013-09-19T13:36:18.217 回答
0

看着js小提琴。“转到顶部”按预期工作。它正在设置跳转到链接并将链接放在页面顶部。碰巧屏幕顶部的链接位于导航栏的后面。

要修复您的 js 小提琴，您需要做的就是向链接添加一个填充，该填充等于您添加的主体上的填充

#a1 {
    padding-top: 70px;
}

现在它看起来会滚动到顶部，但链接不会隐藏在导航栏后面。 http://jsfiddle.net/hajpoj/BtGEx/1/

于 2013-09-19T16:17:51.580 回答
0

我会建议一个“假顶部” div，就像这个小提琴

您可以在导航栏下添加它：

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

然后这个到你的CSS：

#div1 {
    padding-top: 70px;
}

最后，您底部的链接 1 只是转到#div.

于 2013-09-20T13:45:42.200 回答