The title does not reflect the essence of the question. I have put a lot of anchors <a name="c1...с50"></a> on my page <a name="c1...с50"></a> and the link is <a name="c1...с50"></a> by a link with the # c1 hash. So, it is necessary that the visible area of ​​the window scrolls not to the anchor itself, but to a position 50 pixels above the anchor.

UPD Decided so:

 $(document).ready(function() { // Прокрутка к закладке if(window.location.hash) { setTimeout(function(){ var scrollTop = $(window).scrollTop()-50; $('html, body').animate({scrollTop: scrollTop}, 'fast'); }, 50); } })

That is, just wait 50 milliseconds after loading and unscrew the window 50 pixels up ...

  • Here I am also looking, but I can’t find it in any way, I ask the author if he finds an unsubscribe) I will also unsubscribe here if I find a solution) - user11543
  • I added my decision to the question. - Anton Smurov

1 answer 1

You can use this option:

 function scrollToElement(selector, time, verticalOffset) { time = typeof(time) != 'undefined' ? time : 1000; verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $(selector); offset = element.offset(); offsetTop = offset.top + verticalOffset; $('html, body').animate({ scrollTop: offsetTop }, time); }

However, you will have to hang the handler on each link, something like this:

 $('a.jump-to-content').click(function () { scrollToElement('#c1',500, -50); // #c1 - наш элемент, 500 - время анимации, -50 это 50px до нашего элемента });

Taken from this article .

  • In my case, the navigation is not within the same document, but between different pages. So, it fits me according to document.ready - Anton Smurov