Question

I’m using the goToByScroll script and I need it to ignore the first 40px of my page because I have a fixed navigation, resulting in all positions being 40px too low.

Here’s my code:

<script> 
  function goToByScroll(id){
  $('html,body').animate({scrollTop: $("#"+id).offset().top},'500');
  }
</script>

Any solutions?

Answer 1

Just include the 40 pixels when calculating the offset…

$('html,body').animate({scrollTop: $("#"+id).offset().top - 40},'500');

Or maybe something like this…

$('html,body').animate({scrollTop: $("#"+id).offset().top - $("#nav").height() },'500');

And although @Praveen’s answer is wrong, he puts a nice .stop() in there to prevent multiple firing from interfering with each other. Here it is alltogether…

<script>
  // assuming `#nav` identifies your navigation element...
  function goToByScroll(id){
      $('html,body').stop().animate({scrollTop: $("#"+id).offset().top - $("#nav").height() },'500');
  }
</script>