锚定导航后如何向下滚动页面? [英] How to scroll page down after anchor navigation?

问题描述

我添加了顶层菜单作为div的位置:固定. 它位于页面顶部，因此涵盖了部分内容. 我将布局向下移动，因此通常没问题，但是如果用户单击任何锚链接，则页面滚动到锚位于顶部的位置.但是，它已包含在顶部菜单中. 有没有一种方法可以捕获锚事件并使用javascript(如有必要，还可以使用jQuery)对其进行处理?

I have added top menu as a div with position: fixed. It's placed in the top of the page, so it covers part of the content. I moved the layout down, so generally it's ok, BUT if user clicks any anchor link, the page scrolled to where the anchor is on top. But it's covered by the top menu. Is there a way to catch anchor event and process it with javascript (and jQuery if necessary)?

推荐答案

您可以使用以下内容:

$('a').click(function(){
    $('html').scrollTop($($(this).attr('href')).position().top + menu_height_offset)
})

获取锚点位置

$($(this).attr('href')).position().top

使偏移量与固定菜单相关

To make the offset related to the fixed menu

menu_height_offset

要移动滚动条

$('html').scrollTop()

http://api.jquery.com/scrollTop/

http://api.jquery.com/position/

这篇关于锚定导航后如何向下滚动页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！