标题固定和锚链接

【问题标题】：header fixed and anchor links标题固定和锚链接
【发布时间】：2015-10-07 19:55:54
【问题描述】：

我正在为我的网站使用固定标题，但我遇到了一个问题：当我使用锚链接时，第一个内容位于标题下方。当我在页面上时，我可以使用这样的脚本：

$('.action').click(function(event){
    event.preventDefault();
    $('html, body').animate({scrollTop:$('#projects').position().top - 60},800);
});

但是当我在另一个页面上时，使用 href="index.html#projects" 问题就出来了。

有一个解决方案允许使用不带边距的方法吗？

谢谢！

【问题讨论】：

最好创建一个类似的demo。

标签： html css jscript

【解决方案1】：

这对你来说可能不是最好的解决方案，但我会告诉你我会怎么做。通常，当我使用固定的头部元素时，我也会创建一个固定的主体或内容元素。

<html>
    <head>
    </head>
    <body>
        <div id="header" style="position:fixed;top:0px;left:0px;right:0px;height:50px;">
            <!-- header html here -->
        </div>
        <div id="content" style="position:fixed;top:50px;left:0px;right:0px;bottom:0px;">
            <!-- content html here -->
        </div>
    </body>
</html>

【讨论】：

使用固定内容元素我无法向下滚动：S
添加css overflow:scroll;
我认为添加 css 'top: -70px; padding-top: 70px;'是一个更好的解决方案。感谢您的帮助！