Div锚滚动太远 [英] Div anchors scrolling too far

问题描述

我在网站顶部使用了一个静态栏，高度约为20像素。当我点击一个锚点链接（对于那些不知道，在维基百科的导航工作原理，点击一个标题，浏览器下降到它）部分文本消失在顶部栏后面。

I'm using a static bar at the top of my site, about 20px high. When I click an anchor link(for those who don't know, the navigation on wikipedia works like that. Click a title and the browser goes down to it) part of the text disappears behind that top bar.

有什么办法阻止这种情况发生吗？我不在一个可以使用iFrame的位置。只有我能想到的是使它每次都回滚一点，但有另一种方式吗？

Is there any way to stop this from happening? I'm not in a position where I can use an iFrame. Onlything I can think of is make it scroll back a bit each time, but is there another way? Some CSS setting to manipulate the body or something?

推荐答案

要使用CSS修复这个问题，你可以添加一个填充到你想要的元素跳转到：

To fix this with CSS you can add a padding to the Elements you want to jump to:

示例

但这并不总是适用。

对于JavaScript解决方案，您可以尝试以下更正此：

For a javascript solution you could try the following to correct this:

将一个事件附加到锚点元素，并包括以下行：

Attach an event to the anchor elements and include the following line:

window.scroll(0,document.querySelector(this.href).offsetTop - 20);
/* prevent default action*/
return false;

这篇关于Div锚滚动太远的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！