鏈接到同一頁面上的段落

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中元素的高度，然后減去菜單欄的高度。