Ссылка на пункт на той же странице

Question

Я создал ссылку на определенный параграф. Поэтому, когда я нажимаю кнопку, я перехожу к абзацу на той же странице.

Кнопка:

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

Ссылка на пункт:

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

Моя проблема заключается в том, что я хочу, чтобы настроить вид после нажатия на ссылку. То, что я на самом деле хочу сделать, это:

1. Нажмите кнопку
2. Перейти к пункту
3. Прокрутка вниз 40px

Есть простой способ для достижения этой цели?

Answer 1

Я установил его с помощью 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 и выровнят высоту моей строки меню.

Answer 2

Просто измените <a name="paintings"> на <a id="paintings">.

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