我加入了顶部菜单与位置的div：固定的。 它放置在页面的顶部，所以它涵盖了内容的一部分。 我感动的布局了，所以一般这是确定的，但如果用户点击任何锚链接，滚动到锚在顶部的页面。 但是，它是由顶部的菜单覆盖。 有没有办法赶上锚事件，并与JavaScript（和jQuery如有必要）处理它？
Answer 1:
您可以使用这样的事情：
$('a').click(function(){
$('html').scrollTop($($(this).attr('href')).position().top + menu_height_offset)
})
为了获得锚位置
$($(this).attr('href')).position().top
为了使偏移有关的固定菜单
menu_height_offset
为了使移动滚动
$('html').scrollTop()
http://api.jquery.com/scrollTop/
http://api.jquery.com/position/
Answer 2:
你需要计算元素和sroll的偏移offset of element - height of the navigationbar -位置：
$("a").on("click",function(){
// height of the navigation bar
var height= $("#nav").outerHeight();
// position of the referenced dom-element
var pos = $($(this).attr("href")).position().top;
// scroll to the element
$("body").scrollTop(pos - height);
// suppress default
return false;
})
看到它在行动这里 。
Answer 3:
/* START --- scroll till anchor */
(function($) {
$.fn.goTo = function() {
var top_menu_height=$('#div_menu_header').height() + 5 ;
//alert ( 'top_menu_height is:' + top_menu_height );
$('html, body').animate({
scrollTop: (-1)*top_menu_height + $(this).offset().top + 'px'
}, 500);
return this; // for chaining...
}
})(jQuery);
$(document).ready(function(){
var url = document.URL, idx = url.indexOf("#") ;
var hash = idx != -1 ? url.substring(idx+1) : "";
$(window).load(function(){
// Remove the # from the hash, as different browsers may or may not include it
var anchor_to_scroll_to = location.hash.replace('#','');
if ( anchor_to_scroll_to != '' ) {
anchor_to_scroll_to = '#' + anchor_to_scroll_to ;
$(anchor_to_scroll_to).goTo();
}
});
});
/* STOP --- scroll till anchror */
文章来源: How to scroll page down after anchor navigation?
