Question

I am trying write a script where when a user clicks on a link, the page will scroll down to a target minus 20px (ie – if my target is located at [0,100] the page will scroll to [0,80]. The reason for this 20px difference is because I have a banner positioned on a layer above my site of 20px height.

Currently, my approach is to scroll directly to my target, then subtract 20px from my current location. I am having problems determine where my current y position is though.

HTML:

<nav>
  <a href="#chapterA" class="link">ChapterA</a>
  <a href="#chapterB" class="link">ChapterB</a>
</nav>
...
<a name="chapterA">ChapterA</a>
<a name="chapterB">ChapterB</a>

jQuery:

$('.link').click(function() {
  var currentY = 0; //how to get current y position?
  window.scrollTo(0, currentY - 20);
});

Answer 1

try this:

$('.link').click(function(e) {
  e.preventDefault()
  $(window).scrollTop($(window).scrollTop() - 20);
});

note that anchor links without href attribute are not valid.