滚动到带有固定导航栏的链接 ID答案

【问题标题】：scroll to link id with fixed nav bar滚动到带有固定导航栏的链接 ID
【发布时间】：2015-04-19 10:06:56
【问题描述】：

在我的网络中，我有一个固定的导航栏，在它下面我有一些其他的 div - 导航栏链接连接到这些链接。问题是当我单击某个链接时，固定导航栏覆盖了 div 的开头。我想要做的是导航栏将位于 div 的开头，因此它不会覆盖开头。这是结果的link。

这是我的 html 代码：

<body>
<div id="header">
    <div id="nav_bar">
        <ul>
            <li><a href="#">בית</a></li>
            <li><a href="#about_us">מי אנחנו</a></li>
            <li><a href="#our_services">מוצרים</a></li>
            <li><a href="#connect_us">צרו קשר</a></li>
            <li><img src="1.png"></img></li>

        </ul>
    </div>
</div>

<div id="main_pics" class="container">
<!-- photos here -->
<div id="main_photo1" class="phocont first">

</div>
<div id="main_photo2" class="phocont">

</div>
<div id="main_photo3" class="phocont">
</div>
<div id="main_photo4" class="phocont">
</div>
<div id="main_photo5" class="phocont">
</div>
</div>  
<div id="about_us" class="container">
<h1>עץ כנעני - כשעיצוב ואיכות נפגשים</h1>
<p> וייצור המוצר.</p>
<p>א.</p>


</div>

<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
</div>

<div id="connect_us" class="container">
<h1>תאמו איתנו פגישה עוד היום</h1>
</div>  

<div id="down_nav_bar" class="container">
</div>

<div id="credit" class="container">
</div>

</body>

这是我的css代码：

body{
background-color: white;
margin: 0px;
padding: 0px;
}
#nav_bar{
background: rgba(255,255,255,0.9);
height: 55px;
position: fixed;
width: 100%;
top: 0;
left: -2px;
z-index: 2;

}

#nav_bar ul{
padding: 0px;
text-align: center;
direction: rtl;
}

#nav_bar ul li {
display: inline-block;
padding: 0 10px;    
color: gray;
float: inherit;
font-family: "alefregular";
font-size: 23px;
}

#nav_bar ul li a{
color: inherit;
text-decoration: none;
}

#nav_bar ul li a:hover{
color:#a51212;
}

#nav_bar img{

height:18px;
position:absolute;
padding-right:20px;
top:25px;
z-index:-1px;
}
#about_us{
text-align: center;
/*height: 250px;*/
height: 100%;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New     Roman";
color:gray;
}

#about_us p{
width: 55%;
margin: auto;
text-align: center;
direction: rtl;
padding-bottom: 10px;
line-height: 30px;

}

#our_services{
/*height: 450px;*/
text-align: center;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New   Roman";
color: black;
background-color: rgb(224,224,224);
}

【问题讨论】：

问题是因为导航有固定的位置。如果您在所有内容容器中添加上边距，它将解决您的问题。
但是内容开始向下 55px。这不是我想要的......
您可能想使用 jquery 并设置 .scroll() 选项
APRULE，请查看我修改后的答案，它更适合您的需求。 @gerdi，好建议！
它仍然对我不起作用。

标签： javascript html css

【解决方案1】：

尝试向容器添加填充顶部

.container
{
padding-top: 55px;
}

fiddle

如果您不希望文本向下移动“x”像素，您可以使用 jQuery 以编程方式滚动调整偏移量：

$('html, body').animate({
    scrollTop: $(target).offset().top - 55
    }, 1000);

注意，这个例子没有使用padding-top：

fiddle

或者，没有 jQuery：

window.scrollTo(0, document.getElementById(targetSection).offsetTop-55);

fiddle

【讨论】：

这不是你问的;)
我知道，你能帮我解决一下吗？
无需涉及 jQuery。它仍然是 vanillaJS 中的单行代码：window.scrollTo(0, document.getElementById(target).offsetTop-55)
我不明白，你能把它摆弄一下吗？

【解决方案2】：

到目前为止，最简单的方法是向作为链接目标的 div 添加一些填充（与导航栏一样高）：

div.container{ padding-top: 55px; }

为了语义，我建议你也使用section 元素而不是那些无意义的divs 等...https://html.spec.whatwg.org/multipage/semantics.html#sections

【讨论】：