Scroll offset from one page to another

Scroll offset from one page to another

I am stuck in a bit of a peril. I have a scroll-to-anchor set up on "Page1" of a one-page website with easing.js using JavaScript. Below is my code:

  1. $(document).ready(function(){ $('a[href^="#"]').on('click',function (e) { e.preventDefault(); var target = this.hash, $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top - 120 }, 900, 'swing', function () { }); }); });

The links are so: <a href="#bodyContainer1">HOME</a> and the body container it is linked to is so:

  1. <div id="bodyContainer4"> <img src="images/page4.jpg" width="1024" height="892"> </div>

Now my issue is when i click a link that takes me to another page "Page2", I have used this syntax to do it: <a href="page2.html#2009">PAGE 2</a> And it goes to that specific section correctly, but it does not scroll up -120px using the offset function 'scrollTop': $target.offset().top - 120 in my JavaScript. I have used the above same JS code on "Page2.html" also.

Could anyone shed some light into this ? I am Fairly new and learning JS.

Cheers, G