Question

我的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”不起作用。

Answer 1

~~您可以在页面内部使用命名锚点进行链接。~~

例如，您可以将<a name="top"></a>放在<body>标记下方。

在底部，您可以建立一个链接<a href="#top">Go to the top</a>。

我希望这就是你的意思。

EDIT，

~~使用HTML5时，不应使用命名锚点，而应使用全局ID。查看Pavlov评论中的链接！~~

编辑（现在可以看到正确的小提琴）

由于您的navbar位于固定位置，因此它位于DOM之外。链接作为应用程序工作，它将页面滚动到该位置。 CSS的HTML中没有解决方案将其滚动到导航栏下面。

但是你可以使用JQuery。确定锚点的位置，并将导航栏的高度添加到y值。

祝你好运！

Answer 2

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

要修复你的js小提琴你需要做的就是在链接上添加一个填充，等于你添加的身体上的填充

#a1 {
    padding-top: 70px;
}

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

Answer 3

我建议使用“假顶”div，例如this fiddle

您可以在导航栏下添加：

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

然后再到你的CSS：

#div1 {
    padding-top: 70px;
}

最后，您底部的链接1将转到#div。

当固定导航栏存在时，HTML页面转到内联链接

3 个答案: