链接到同一页面上的段落

Question

我已经创建了到某个段落的链接。 因此，当我单击我的按钮时，我转到同一页面上的段落。

按钮：

<a href="http://example.com/#paintings">Paintings</a>

链接到段落：

<a name="paintings"><h2>Paintings</h2></a>

我的问题是我想在单击链接后调整视图。 我实际上想做的是：

1. 点击按钮
2. 转到段落
3. 向下滚动40像素

有没有简单的方法可以做到这一点？

Answer 1

只需将<a name="paintings">更改为<a id="paintings"> 。

<a id="paintings"><h2>Paintings</h2></a>

Answer 2

我使用jQuery修复了它。

var element = document.getElementById(page);
var rect = element.getBoundingClientRect();
var elementLeft,elementTop;
var scrollTop = element.scrollTop?
element.scrollTop:document.body.scrollTop;
elementTop = rect.top+(scrollTop);
var menuBar = $('#header').height();

$("html, body").animate({
    scrollTop: (elementTop -menuBar)
}, 1000 / 2);

这将使我的页面向下滚动到该元素。 他将计算html中元素的高度，然后减去菜单栏的高度。