Javascript 如何在引导scrollspy和粘贴中为href锚点设置偏移距离

Javascript 如何在引导scrollspy和粘贴中为href锚点设置偏移距离,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,使用href锚定时navmenu覆盖的div内容。div开头也需要在锚定单击时显示。单击“锚定”时,是否有任何选项可以与菜单保持一定距离 演示: $(文档).ready(函数(){ $('a[href*=#]:非([href=#])。单击(函数(){ if(location.pathname.replace(/^\/,'')==this.pathname.replace(/^\/,'')和&location.hostname==this.hostname){ var target=$(thi

使用href锚定时navmenu覆盖的div内容。div开头也需要在锚定单击时显示。单击“锚定”时,是否有任何选项可以与菜单保持一定距离

演示:

$(文档).ready(函数(){
$('a[href*=#]:非([href=#])。单击(函数(){
if(location.pathname.replace(/^\/,'')==this.pathname.replace(/^\/,'')和&location.hostname==this.hostname){
var target=$(this.hash);
target=target.length?target:$('[name='+this.hash.slice(1)+']');
if(目标长度){
$('html,body')。设置动画({
scrollTop:target.offset().top
}, 1000);
返回false;
}
}
});
});
正文{
位置:相对位置;
}
.粘贴{
宽度:100%;
}
#第一节{
背景色:#1E88E5;
}
#第2节{
背景色:#673ab7;
}
#第三节{
背景色:#ff9800;
}
#第41节{
背景色:#00bcd4;
}
#第42节{
背景色:#009688;
}
.海关司{
高度:500px;
颜色:#fff;
}
.navbar默认值{
页边距底部:0;
背景色:透明;
边界:无;
}
.navbar-default.affix{
保证金:自动;
右:0;
左:0;
过渡:所有.6s易于输入输出;
}
.navbar-default.affix+容器流体{
/*填充顶部:70px*/
}

第一节 尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏

尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏

第二节 尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏

尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏

第三节 尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏

尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏

第4节子菜单1 尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏

尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏

第4节子菜单2 尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏!

尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏

您需要使用:

scrollTop: target.offset().top - 125
坦率地说,
-125
是一次尝试和错误。它应该根据导航栏的高度来计算

片段

$(文档).ready(函数(){
$('a[href*=#]:非([href=#])。单击(函数(){
if(location.pathname.replace(/^\/,'')==this.pathname.replace(/^\/,'')和&location.hostname==this.hostname){
var target=$(this.hash);
target=target.length?target:$('[name='+this.hash.slice(1)+']');
if(目标长度){
$('html,body')。设置动画({
scrollTop:target.offset().top-125
}, 1000);
返回false;
}
}
});
});
正文{
位置:相对位置;
}
.粘贴{
宽度:100%;
}
#第一节{
背景色:#1E88E5;
}
#第2节{
背景色:#673ab7;
}
#第三节{
背景色:#ff9800;
}
#第41节{
背景色:#00bcd4;
}
#第42节{
背景色:#009688;
}
.海关司{
高度:500px;
颜色:#fff;
}
.navbar默认值{
页边距底部:0;
背景色:透明;
边界:无;
}
.navbar-default.affix{
保证金:自动;
右:0;
左:0;
过渡:所有.6s易于输入输出;
}
.navbar-default.affix+容器流体{
/*填充顶部:70px*/
}

第一节 尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏

尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏

第二节 尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏

尝试滚动此部分,并在滚动时查看导航栏!