滚动到固定顶栏的id
滚动到固定顶栏的id
提问于 2013-02-28 23:41:54
我的页面有一个固定的顶部导航栏和几个页面上的id元素。如果我按下这些id元素中的一个链接，它会将此id滚动到顶部，但它隐藏在顶部导航栏的下面。在野外，页面非常长，并且有不同的“跳转点”。
我有一个带有以下html的a simplified fiddle to show the problem
<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
body{padding:0;margin:0}
#toplinks{padding-top:2em}
#fixedbar{
position:fixed;
background-color:#ccc;
height:2em;
width:100%
}我想让点击一个链接滚动到右边的元素，但补充固定导航栏。一种可能的解决方案最多只能包含css，但也可以包含javascript或jquery (1.9用于生产)。
谢谢你的帮助！
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-02-28 23:54:55
以下是解决此问题的JavaScript解决方案。将单击事件绑定到toplinks和by链接中的<a>，在单击事件上查找目标<p>偏移量，并使用javascript滚动到它。
$("#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);
});Stack Overflow用户
发布于 2013-02-28 23:52:57
修改后的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%
}小提琴：http://jsfiddle.net/xSdKr/
40(px)是菜单高度，1000是执行动画的毫秒时间。
到目前为止，JS解决方案比纯CSS更优雅，主要是因为它保持了元素的位置，而没有任何可能干扰您的网站样式的人工填充。它还包括动画-人们通常发现平滑的过渡比使用纯CSS/HTML的insta-flips更容易接受，因为它们可以更容易地跟踪页面的内容和你所在的位置。缺点是，如果有人在网址中使用#first -他将看到与标题重叠的菜单。
Stack Overflow用户
发布于 2013-02-28 23:48:34
你可以稍微作弊一点。
body{padding:0;margin:0}
#toplinks{padding-top:2em; margin-bottom: -40px;}
#fixedbar{
position:fixed;
background-color:#ccc;
height:2em;
width:100%;
}
#first, #second{
padding-top: 40px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15139644
复制相关文章
相似问题
腾讯云开发者
