Change hash and animate scroll to element

Question

I have a link and an element on the same page:

<a href="#about-us" id="link">Click</a>

<div id="#about-us"></div>

And the following javascript:

var scrollto = window.location.hash;
if (window.location.hash != null && window.location.hash != '') {
    $('html, body').animate({
        scrollTop: $(scrollto).offset().top
    }, 500);
}

This should animate a scroll to #about-us element,but it doesn't , it goes straight to element without animation,probably because the hash condition is not met,though there is a hash in url,because the hash is changed after the function.

I need a way to auto scroll to that element with animation,when you click the link . As example,if this page is index.php , and you want to go from another-page.php to index.php , straight to that element, it should load the page,and then scroll to the element,same if you are on index.php but at the top of the page and you click on the link,it should scroll down to the element.

The only problem is when you are on the same page.It doesn't pass the condition,so the animation doesn't work.

UPDATE I've changed the code a little bit.Now the condition is meet,but the animation doesn't work..

$('#link').click(function(e) {
    window.location.href='index.php#about-us';
    var scrollto = window.location.hash;
    if (window.location.hash != null && window.location.hash != '') {
        alert(scrollto);
        $('html, body').animate({
            scrollTop: $(scrollto).offset().top
        }, 500);
    }
});

Answer 1

This is because window.location.hash is not defined by the time you click on the link and the event handler is called.

Try using:

jQuery(function($) {
    $('#link').on('click', function(e) {
        e.preventDefault();
        var scrollTo = $(this).attr('href'); // retrieve the hash using .attr()

        if (scrollTo != null && scrollTo != '') {
            $('html, body').animate({
                scrollTop: $(scrollTo).offset().top
            }, 500);
        }
    });
});

Also, change your HTML code with:

<div id="about-us"></div> <!-- no need for prepending id value with # -->

See this working JSFiddle

---

If you want to bind the event on page load, use:

$(document).on('load', function(e) { /* the codez */ });

And retrieve the location hash with var scrollTo = window.location.hash; that will be defined when the page loads.

Answer 2

This code works for me

HTML for same page scroll

<a href="#about-us" class="link">Click for About us</a>

<div id="about-us"></div>

HTML for external page link

<a href="product.html#introduction">Click for product introduction</a>

HTML for external page scroll

<div id="introduction"></div>

jQuery

if(window.location.hash){
    var getUrlAfterHash = window.location.hash;
    if($(getUrlAfterHash).length > 0){
        $('html, body').animate({ scrollTop : 0 });
        scrollToTop();
    }
}

$('.link').on('click', function(e){
    e.preventDefault();
    var getUrlAfterHash = $(this).attr('href');
    scrollToTop();
 });

function scrollToTop(){
    var idPositionHeight = $(getUrlAfterHash).offset();
    $('html, body').animate({ scrollTop : idPositionHeight.top}, 800);
}