Question

我尝试创建一个网站，但问题是＆＃34;锚定＆＃34;导航。在页面顶部有一个固定的标题。当您在标题下滚动主要部分消失时。

现在我在左侧有一个导航栏，可以跳转到不同的标题。但随着＆＃34;锚＆＃34;功能，标题总是跳到远处。他已经在标题下消失了。是否有可能跳到顶部？

这是一个小提琴的例子。

<div class="header">Header <br> <br> <a href="#Title2">Title2</a></div>
<div class="main">
    <h1>Title 1</h1>
    <h1 id="Title2">Title 2</h1> 
</div>

.header{
width:500px;
height:100px;
background-color: red;
position:fixed;

}
.main {
padding-top: 100px;
width:500px;
height:1000px;
background-color:lightblue;

}

http://jsfiddle.net/BLrUG/

点击＆＃34; Title2＆＃34;链接，看看问题。

thx BBallBoy

Answer 1

固定的位置就像绝对一样......其他元素不知道这个标题是否被删除而且它们在它之上/之下。它的代码运行正常你需要添加这个：

*{margin:0;padding:0}

清除空白，你的页面看起来会很好

也许你正在搜索Jquery funcs：

Answer 2

您可以使用JavaScript调用滚动到该元素，但稍微修复偏移量，使其不被标题覆盖。

function scrollTo(id) {
    var offset = 0;

    //Get element
    var obj = document.getElementById(id);

    //Determine offset  
    if (obj.offsetParent) {
        do {
            offset += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }

    //Account for header
    offset -= 120;

    window.scroll(0, offset);
}

然后，不是在锚中使用ID，而是将其传递给函数

<a href="javascript:void(0);" onclick="javascript:scrollTo('Title2');">Title2</a>

您需要使用偏移修正来找到最佳值。您可能还希望将其作为函数的参数，以使其更具可重用性。

Answer 3

在标题类中使用顶部位置

 top:0px;

并为两个标题段落使用div并为两个para div设置上边距。

HTML导航锚点不应跳转到页面顶部

3 个答案: