如果我在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技巧将是一个解决方案。使用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个像素的差异
滚动效果不硬，比较平滑;平滑滚动
