php解决锚点定位不准确,解决网页中使用Bootstrap固定导航时锚点偏移问题

用两种方法解决网页中使用Bootstrap固定导航时锚点偏移问题，这个问是在响应式布局比较常见，希望本文能够帮助您解决固定民航锚点偏移。

使用Bootstrap布局了一个网页使其支持响应式布局，并且将导航菜单固定住，这样做 Categories 和 Tags 页面点击某一个分类或者标签链接时， 锚点定位必然定位于页面顶部，这样一来就会被固定住的导航遮挡 ，例如，我在Categories页面，点击 hbase 分类，锚点定位最后如下图：

找到一篇文章《点击锚点让定位偏移顶部》(底部我们给出原文) ，这篇文章提到几种解决办法：

第一种，使用css将锚点偏移：

主体内容...

css如下：

.target-fix {

position: relative;

top: -44px; /*偏移值*/

display: block;

height: 0;

overflow: hidden;

}

对于现代浏览器如果支持css的 :target 声明，可以这么设置：

article.a-post:target{

padding-top:44px;

}

第二种，使用JavaScript去调整scroll值：

$(function(){

if(location.hash){

var target = $(location.hash);

if(target.length==1){

var top = target.offset().top-44;

if(top > 0){

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

}

}

}

});

注意：上面代码中的44为固定的导航所占的像素高度，根据你的实际情况做修改。

当然，你也可以使用jquery-hashchange插件去实现上面的功能，但是需要注意jquery-hashchange是否支持你使用的JQuery版本。

$(function(){

/* 绑定事件*/

$(window).hashchange(function(){

var target = $(location.hash);

if(target.length==1){

var top = target.offset().top-44;

if(top > 0){

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

}

}

});

/* 触发事件 */

$(window).hashchange();

});

分析上面两种方法，我最后使用的是第二种方法，在core.js文件中添加如下代码：

$('a[href^=#][href!=#]').click(function() {

var target = document.getElementById(this.hash.slice(1));

if (!target) return;

var targetOffset = $(target).offset().top-70;

$('html,body').animate({scrollTop: targetOffset}, 400);

return false;

});

这里，我是在链接上监听单击事件，获取目标对象的偏移，上面减去70是因为下面的css代码：

#wrap {

min-height: 100%;

height: auto;

margin: 0 auto -60px;

padding: 70px 0 60px;

}

刷新页面，再次点击目录或者标签，就可以正常的跳到锚点位置了。你可以点击分类 hbase 试试效果。

但是，还没有结束 。如果是从其他页面，例如，在文章页面点击分类或标签时，页面却不会跳转到正确的锚点位置。这是因为上面的javascript代码只是考虑了当前页面，是在当前页面获取目标的偏离，而没有考虑在另外一个页面单击链接跳到目标页面的锚点的情况。

所以，我们需要修改代码：

var handler=function(hash){

var target = document.getElementById(hash.slice(1));

if (!target) return;

var targetOffset = $(target).offset().top-70;

$('html,body').animate({scrollTop: targetOffset}, 400);

}

$('a[href^=#][href!=#]').click(function(){

handler(this.hash)

});

if(location.hash){ handler(location.hash) }

我主要的参考文章：点击锚点让定位偏移顶部

最近遇到的问题是：网页多出需要设置锚点，但网站顶部导航采用float:fixed绝对定位，浮动于顶部。那么问题来了，锚点定位必然定位于页面顶部，这样一来就会被浮动的导航遮挡。

在stackoverflow看到的一个方法是在主体内容前加一个暗锚：

主体内容...

将锚点进行偏移，并隐藏占位：

.target-fix {

position: relative;

top: -44px; // 偏移值

display: block;

height: 0;

overflow: hidden;

}

这个也是最直接的方法。

我采用的是相对简洁的方法：对于现代浏览器如果支持css的:target声明,可以这么设置:

article.a-post:target{

padding-top:44px;

}

对于IE这等落后的浏览器是不支持的.另外可以使用js去调整scroll,比如使用jQuery:

$(function(){

if(location.hash){

var target = $(location.hash);

if(target.length==1){

var top = target.offset().top-44;

if(top > 0){

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

}

}

}

});

可以使用jquery-hashchange:https://github.com/cowboy/jquery-hash...

绑定window.onhashchange事件:

$(function(){

/* 绑定事件*/

$(window).hashchange(function(){

var target = $(location.hash);

if(target.length==1){

var top = target.offset().top-44;

if(top > 0){

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

}

}

});

/* 触发事件 */

$(window).hashchange();

});