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

HTML page goto inline link when fixed navbar exists

本文关键字：存在 导航 链接 HTML      更新时间：2023-09-26

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

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

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

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

我希望这就是你的意思。

编辑

使用

HTML5 时，不应使用命名锚点，而应使用全局 id。检查巴甫洛夫评论中的链接！

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

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

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

祝你好运！

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

要修复您的js小提琴，您需要做的就是在链接中添加一个填充，等于您添加的正文上的填充 

#a1 {
    padding-top: 70px;
}

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

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

可以在导航栏下添加以下内容：

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

然后这个到你的 CSS：

#div1 {
    padding-top: 70px;
}

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

相关文章：