如果我在HTML页面中有一个非滚动头，固定在顶部，有一个定义的高度:
是否有一种方法可以使用URL锚(#fragment部分)让浏览器滚动到页面中的某一点，但仍然尊重固定元素的高度，而不需要JavaScript的帮助?
http://example.com/#bar
WRONG (but the common behavior): CORRECT:
+---------------------------------+ +---------------------------------+
| BAR///////////////////// header | | //////////////////////// header |
+---------------------------------+ +---------------------------------+
| Here is the rest of the Text | | BAR |
| ... | | |
| ... | | Here is the rest of the Text |
| ... | | ... |
+---------------------------------+ +---------------------------------+
我已经很容易地使用CSS和HTML，使用上面提到的“锚:之前”方法。我认为它是最好的，因为它不会在你的divs之间产生大量的填充。
.anchor:before {
content:"";
display:block;
height:60px; /* fixed header height*/
margin:-60px 0 0; /* negative fixed header height */
}
这似乎并不适用于页面上的第一个div，但你可以通过添加填充到第一个div。
#anchor-one{padding-top: 60px;}
这里有一个工作小提琴:http://jsfiddle.net/FRpHE/24/
我发现处理这个问题的最好方法是(用固定的元素高度替换65px):
div:target {
padding-top: 65px;
margin-top: -65px;
}
如果你不喜欢使用目标选择器，你也可以这样做:
.my-target {
padding-top: 65px;
margin-top: -65px;
}
注意:如果目标元素的背景色与父元素的背景色不同，这个例子将不起作用。
例如:
<div style="background-color:red;height:100px;"></div>
<div class="my-target" style="background-color:green;height:100px;"></div>
在这种情况下，我的目标元素的绿色将覆盖65px的父元素红色。
我没有找到任何纯CSS解决方案来处理这个问题，但如果你没有另一个背景色，这个解决方案是最好的。
如果你不能或不想设置一个新类，在CSS的:target伪类中添加一个固定高度的::
:target::before {
content: "";
display: block;
height: 60px; /* fixed header height*/
margin: -60px 0 0; /* negative fixed header height */
}
或者使用jQuery相对于:target滚动页面:
var offset = $(':target').offset();
var scrollto = offset.top - 60; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);
这是一个完整的jquery解决方案，将在IE中工作:
假设导航栏元素是这样的:
<ul>
<li><a class="navigation" href="/#contact-us">Contact us</a></li>
<li><a class="navigation" href="/#about-us">About us</a></li>
</ul>
你可以使用下面的jquery片段来偏移滚动:
$(function() {
$("a.navigation").click(function(event) {
event.preventDefault();
offSetScroll($(this));
});
offSetScrollFromLocation(window.location.href.toLowerCase());
});
function offSetScroll(anchor) {
var href = anchor.attr("href");
offSetScrollFromLocation(href);
}
function offSetScrollFromLocation(href) {
//Change this according to the height of the navigation bar
var fromTop = 250;
if(href.indexOf("#")<=0)
return;
var hash=href.substring(href.indexOf("#"));
var targetOffset = $(hash).offset().top-fromTop;
$('html, body').animate({scrollTop: targetOffset}, 400, function(e) {
});
}
虽然一些建议的解决方案适用于同一页面内的片段链接(=散列链接)(比如向下滚动的菜单链接)，但我发现当你想使用来自其他页面的片段链接时，它们都不适用于当前的Chrome。
因此，从头开始调用www.mydomain.com/page.html#foo不会抵消当前Chrome中任何给定的CSS解决方案或JS解决方案的目标。
还有一个jQuery错误报告描述了这个问题的一些细节。
解决方案
到目前为止，我发现唯一一个真正在Chrome中工作的选项是JavaScript，不称为onDomReady，但有延迟。
// set timeout onDomReady
$(function() {
setTimeout(delayedFragmentTargetOffset, 500);
});
// add scroll offset to fragment target (if there is one)
function delayedFragmentTargetOffset(){
var offset = $(':target').offset();
if(offset){
var scrollto = offset.top - 95; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);
}
}
总结
没有JS的延迟解决方案可能在Firefox, IE, Safari中工作，但在Chrome中行不通。
我之所以使用这种方法，是因为出于某种原因，其他提出的解决方案都不适合我。我保证我尽力了。
section {
position: relative;
border-top: 52px solid transparent; /* navbar height +2 */
margin: -30px 0 0;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
section:before {
content: "";
position: absolute;
top: -2px;
left: 0;
right: 0;
border-top: 2px solid transparent;
}
如果您愿意，可以将section替换为类。
来源:跳转链接和视口定位
在Firefox 45和Chrome 52上测试。
引导版本:3.3.7
对于那些不相信我的人，我善意地准备了一个jsfiddle的解决方案:解决方案
CSS技巧将是一个解决方案。使用jQuery可以实现一个适用于所有场景的解决方案。
参考https://codepen.io/pikeshmn/pen/mMxEdZ
方法:我们使用document.getElementById('header').offsetHeight获取固定导航的高度
并将滚动偏移到这个值。
var jump=function(e){
e.preventDefault(); //prevent "hard" jump
var target = $(this).attr("href"); //get the target
//perform animated scrolling
$('html,body').animate(
{
scrollTop: $(target).offset().top - document.getElementById('header').offsetHeight - 5 //get top-position of target-element and set it as scroll target
},1000,function() //scrolldelay: 1 seconds
{
location.hash = target; //attach the hash (#jumptarget) to the pageurl
});
}
$(document).ready(function()
{
$('a[href*="#"]').bind("click", jump); //get all hrefs
return false;
});
注:
它包含了头部和目标之间5个像素的差异
滚动效果不硬，比较平滑;平滑滚动
使用jQuery的最小侵入性方法:
链接:
<a href="#my-anchor-1" class="anchor-link">Go To Anchor 1</a>
内容:
<h3 id="my-anchor-1">Here is Anchor 1</a>
脚本:
$(".anchor-link").click(function() {
var headerHeight = 120;
$('html, body').stop(true, true).animate({
scrollTop: $(this.hash).offset().top - headerHeight
}, 750);
return false;
});
通过将锚链接类分配给链接，其他链接(如手风琴或制表符控件)的行为不会受到影响。
这个问题不需要javascript，但另一个更受欢迎的问题因为这个问题而关闭了，我无法回答。
我在这里和其他地方的许多答案都遇到了很多麻烦，因为我的书签锚是FAQ页面中的部分标题，所以抵消标题并没有帮助，因为其余的内容只是停留在原地。所以我想我应该发帖。
我最终做的是几个解决方案的组合:
CSS:
.bookmark {
margin-top: -120 px;
padding-bottom: 120 px;
显示:块;
｝
其中“120px”是你的固定标题高度(可能加上一些边距)。
书签链接HTML:
<a href="#01">你的常见问题是什么来着?< / >
书签内容HTML:
<span class="bookmark" id="01"></span>
你的常见问题是什么来着?< / h3 >
<p>一些常见问题的文本，后面跟着
< p >…</p>
这个解决方案的优点是span元素不仅隐藏，而且本质上是折叠的，不会填充您的内容。
我不能对这个解决方案有太多的功劳，因为它来自不同的资源，但它最适合我的情况。
你可以在这里看到实际的结果。
我需要一些东西，适用于入站链接，页面上的链接，并可以通过JS的目标，以便页面可以响应头部高度的变化
HTML
<ul>
<li><a href="#ft_who">Who?</a></li>
<li><a href="#ft_what">What?</a></li>
<li><a href="#ft_when">When?</a></li>
</ul>
...
<h2 id="ft_who" class="fragment-target">Who?</h2>
...
<a href="#">Can I be clicked?</a>
<h2 id="ft_what" class="fragment-target">What?</h2>
...
<h2 id="ft_when" class="fragment-target">When?</h2>
CSS
.fragment-target {
display: block;
margin-top: -HEADER_HEIGHTpx;
padding-top: HEADER_HEIGHTpx;
z-index: -1;
}
z-index: -1允许片段目标上方“填充区域”中的链接仍然是可点击的，正如@MuttenXd在他的回答中所评论的那样
我还没有在IE 11、Edge 15+、Chrome 38+、FF 52+或Safari 9.1+中发现问题
