如何在定位导航后向下滚动页面
How to scroll page down after anchor navigation?
我添加了顶部菜单作为div,位置为:fixed。它被放置在页面的顶部,因此它覆盖了部分内容。我把布局向下移动了,所以一般来说是可以的,但如果用户点击任何锚链接,页面就会滚动到锚在顶部的位置。但它被顶级菜单覆盖了。是否有一种方法可以捕获锚点事件并使用javascript(必要时还可以使用jQuery)进行处理?
您可以使用这样的东西:
$('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/
您需要计算元素和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;
})
请在此处查看它的实际操作
/* 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 */
相关文章:
- 如何在定位导航后向下滚动页面
- 滚动定位时隐藏标题
- "此网站似乎使用滚动链接定位效果.这可能不能很好地与异步平移一起工作;
- 当打开绝对定位下拉菜单时,页面将滚动到顶部
- 固定定位元素在滚动时停止在某个点
- JQuery定位:我可以滚动到正确的位置一次,但不能滚动两次
- jquery数据表滚动条定位
- Javascript修复了滚动定位
- 实现延迟在滚动上加载未知大小的图像并最佳定位的图像库
- (IE9)删除浮动或绝对定位的元素将导致同级元素的滚动条滚动回顶部
- JS滚动链接 - 使用linkify - 如何定位特定类
- 滚动到:定位导航栏中的特定按钮
- 水平滚动定位
- 滚动时引导弹出框未连接到按钮/定位错误
- 定位滚动条
- 如何防止父容器滚动定位为固定的子元素
- 定位链接滚动条从中间开始
- CSS-定位滚动分区
- Javascript滚动视差定位
- jQuery滚动定位不好