JQuery smooth scroll to id from URL

Question

Let's say you have the following URL, (www.domain.com/page.php#_number).

I want to extract the id from the url**(_1)** and scroll to it on page load.

Your help will be appreciated.

Thanks for your help all.

The answer:-

$(document).ready(function() { 
    var $root = $('html, body');
    var ancloc = window.location.hash;
    event.preventDefault();
        $root.animate({
            scrollTop: $(ancloc).offset().top
        }, 500, function () {
            window.location.hash = href;
        });
        return false;
});

Solution 1

Why not just use an anchor <a href="http://www.domain.com/page.php#number"> and animate that. Check this link: Smooth scrolling when clicking an anchor link

Solution 2

1- You can get the string "#number" by location.hash.

2-You can use a jQuery plug-in like jQuery Scrollbar Slider

You don't need to create click event, it handles that.

EDIT:

If you want it to work without click, on page load, you must prevent default browser behavior. Because browser will scroll automatically.

here is another DEMO that works on page load DEMO

Comments

[user1852196]

The link you provided only triggers on click event. I want to extract the id and scroll to it on page load.

[Casey Dwayne]

You can change it to whatever event you want. I personally use $(document).ready(function(e) {} for load events. Just remove the .click