javascript - HTML 导航 anchor 不应跳转到页面顶部

标签 javascript html css

我尝试创建一个网站,但“ anchor ”导航有问题。 在页面的顶部有一个固定的标题。当您滚动时,主要部分会在标题下消失。

现在我在左侧有一个导航,可以跳转到不同的标题。 但是有了“ anchor ”功能,标题总是跳得很远。他已经在标题下消失了。 是否有可能跳到刚好接近顶部的位置?

这是一个 fiddle 的例子。

<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/

单击“Title2”链接,查看问题。

谢谢 BBallBoy

最佳答案

position fixed 就像绝对的...其他元素不知道这个标题的存在,它们在它上面/下面。你的代码运行正确你需要添加这个:

*{margin:0;padding:0}

清除空格,你的页面看起来会很好

也许你正在搜索这个 Jquery funcs :

关于javascript - HTML 导航 anchor 不应跳转到页面顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23759761/

相关文章:

html - 在图像上居中左对齐文本

javascript - 如何设置动态图片路径

javascript - 如何向 html 字符串添加对象?

html - 当我悬停时如何更改特定链接的文本或背景颜色?

javascript - Chart.js "extra options"有问题

css - bulma 的 `pagination-previous` 的源代码在哪里?

css - 将图像插入动画心形

javascript - this.setState 不是 Rails 函数

javascript - javascript中有没有一种方法可以访问原型(prototype)私有(private)(使用模块JS模式)方法中的变量

javascript - 如何循环遍历具有相同类名的复选框组?