Jquery scroll to offset target div on page load

Question

I'm trying to scroll to the div that is in the URL. It could be one of 21 IDs like:

url.com/test#lite1

url.com/test#lite2

url.com/test#lite3

I need this to happen on page load (user is coming from an ebook and should see the exact item they clicked on).

Here is the code I currently have:

$(document).ready(function(){
    $('a[href^="#"]').load(function() {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top -150
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

</script>

It doesn't work and I think it's because of this part (I have no idea what I'm doing here):

$('a[href^="#"]').load(function() {

I also want it to be in the center of the page (not at the top cut off like browsers do when scrolling to divs). Please let me know if this is correct:

$target.offset().top -150

Thanks so much in advance!

Zeus Zeus · Accepted Answer · 2015-11-04T15:20:44

window.location.hash contains the current hash in the URL so use that. As the hash is already in the URL(as you said that they come to page by clicking on link with hash) so you don't need to add it manually. Try using this :

$(document).ready(function(){
     $('html,body').animate({
          scrollTop: $(window.location.hash).offset().top-150
      }, 900, 'swing');
});

Using wordpress, it seems the $ needs to be replaced by jQuery so it comes out to:

jQuery(document).ready(function(){
     jQuery('html,body').animate({
          scrollTop: jQuery(window.location.hash).offset().top-150
      }, 900, 'swing');
});

Jquery scroll to offset target div on page load

2 Answers