How to scroll HTML page to given anchor using jQuery or Javascript?

Question

Id like to make browser to scroll page to given anchor, just by using javascript.

I have specified name or id attribute in my html code:

 <a name="anchorName">..</a>

or

 <h1 id="anchorName2">..</h1>

I'd like get same effect as you get by navigating to http://server.com/path#anchorName. The page should be scrolled so that the anchor is near top of visible part of page.

Answer 1

Something as easy as should do the trick.

function jumpToAnchor(anchor){
     location.href = location.href+"#"+ anchor;
}

Another option would be to use the jQuery ScrollTo plugin.

Answer 2

You can use jQuerys .animate(), .offset() and scrollTop. Like

$(document.body).animate({
    'scrollTop':   $('#anchorName2').offset().top
}, 2000);

example link: http://jsbin.com/unasi3/edit

If you don't want to animate use .scrollTop() like

$(document.body).scrollTop($('#anchorName2').offset().top);

or javascripts native location.hash like

location.hash = '#' + anchorid;

Answer 3

function scrollTo(hash) {
    location.hash = "#" + hash;
}

No jQuery required at all!

Answer 4

Way simpler:

element_to_scroll_to = document.getElementById('anchorName2');
element_to_scroll_to.scrollIntoView();