CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ramitaste
ramitaste

Reputation: 41

Jquery scroll to offset target div on page load

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!

Upvotes: 1

Views: 4903

Answers (2)

MarkPlewis
MarkPlewis

Reputation: 2410

As an alternative, you could try using the following jQuery plugins. I've used them on multiple projects. They're customizable and provide nice, smooth animation:

scrollTo (download, documentation) allows you to scroll to a specific element on the page. Basic usage: $(element).scrollTo(target);

localScroll (download, documentation) requires scrollTo as a dependency, and handles anchors for you. You can apply it to specific set of links by selecting their container: $('#link-container').localScroll();, or you can activate it globally: $.localScroll();

Upvotes: 0

Zeus
Zeus

Reputation: 1275

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');
});

Upvotes: 3

Related Questions