Javascript 滚动到带有固定顶栏的id
我的页面有一个固定顶部的导航栏,页面上有几个id元素。如果我按下其中一个id元素的链接,它会将该id滚动到顶部,但它隐藏在顶部导航栏下。在野外,页面很长,有不同的“跳跃点” 我已经使用了以下htmlJavascript 滚动到带有固定顶栏的id,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我的页面有一个固定顶部的导航栏,页面上有几个id元素。如果我按下其中一个id元素的链接,它会将该id滚动到顶部,但它隐藏在顶部导航栏下。在野外,页面很长,有不同的“跳跃点” 我已经使用了以下html <div id="fixedbar">This is the fixed top bar</div> <div id="toplinks"><a href="#first">First</a> <a href="#second">
<div id="fixedbar">This is the fixed top bar</div>
<div id="toplinks"><a href="#first">First</a> <a href="#second">Second</a></div>
<p id="first"><strong>First</strong>
Lorem ipsum dolor sit amet[...]
</p>
<p id="second"><strong>Second</strong>
Duis autem vel eum iriure dolor[...]
</p>
<div id="bottomlinks"><a href="#first">First</a> <a href="#second">Second</a></div>
我希望单击链接可以滚动到右边的元素,但可以补充固定的导航栏。
一个可能的解决方案最多只能包括css,但可以包括javascript或jquery(1.9用于生产)
谢谢你的帮助 你可以作弊一点 修改的JS:
$("#toplinks a").click(function() {
var id = $(this).attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top-40
}, 1000);
});
修改的CSS:
body{padding:0;margin:0}
#toplinks{padding-top:2em}
#fixedbar{
position:fixed;
background-color:#ccc;
height:40px;
width:100%
}
小提琴:
40(px)是菜单高度,1000是以毫秒为单位执行动画的时间
JS解决方案比纯CSS优雅得多,主要是因为它使元素保持在原位,没有任何可能干扰网站风格的人工填充。它还包括动画——人们通常会发现平滑的过渡比纯CSS/HTML的insta flips更容易接受,因为这样可以更容易地了解页面内容和您的确切位置。缺点是,如果有人在URL中使用
#first
,他会看到菜单与标题重叠。下面是解决此问题的JavaScript解决方法。将单击事件绑定到中。填充会打断页面上其他元素的布局。所以这是行不通的:(+1用于计算固定条高度,而不是使用近似值/猜测。我为完整性添加了一点调整=)谢谢,这很有魅力。我将标题改为$('a[href^=“#”]”)。在('click keyup')上,
但您的答案对我来说是缺少的提示。感谢您调整我的代码,Raad。不客气,Bastian Range=]谢谢您的建议,我尝试并修改了,但Dereks answer完成了任务。
$("#toplinks a").click(function() {
var id = $(this).attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top-40
}, 1000);
});
body{padding:0;margin:0}
#toplinks{padding-top:2em}
#fixedbar{
position:fixed;
background-color:#ccc;
height:40px;
width:100%
}
$("#toplinks, #bottomlinks").on('click','a', function(event){
event.preventDefault();
var o = $( $(this).attr("href") ).offset();
var sT = o.top - $("#fixedbar").outerHeight(true); // get the fixedbar height
// compute the correct offset and scroll to it.
window.scrollTo(0,sT);
});