Scroll to position on another page when links already have anchor to scroll

Question

I have this menu on home page that scrolls to the id positions:

<li><a href="#event-section">El evento</a></li>
<li><a href="#asistentes-section">Asistentes</a></li>
<li><a href="#contact-section">Contacto & Inscripciones</a></li>

I'm using this script for the smooth scrolling:

var $root = $('html, body');
$('a').click(function() {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

This works perfectly.

The problem is that I have another page in the site. When the user enters to it and click on any link of the menu, it just doesn't work since the divs exists only on home page. I want that if the user is in this other page and clicks on a link of the menu then the home page opens going to that section.

Any idea how can I fix this menu to be able to do both things?

Answer 1

Try adding index.html then hash like below in all other pages except homepage. This should work.

<li><a href="index.html#event-section">El evento</a></li>

Answer 2

you can use this script, Need to dynamic means to get the hash url scrolldown to there. Example:

<script>
if (window.location.href.trim().toLowerCase().indexOf('#event-section') > -1) {
    $('html, body').stop().animate({
        'scrollTop': $("a[href='#event-section']").offset().top
    }, 800, 'swing', function () {
    });
}
</script>

This is for first link page as index.html#event-section.

Answer 3

Simplest way is to create another nav bar for other page from where you want to redirect your end users

<li><a href="/index.php?id=event-section">El evento</a></li>
<li><a href="/index.php?id=asistentes-section">Asistentes</a></li>
<li><a href="/index.php?id=contact-section">Contacto & Inscripciones</a></li>

and on your home page run this script

<script>

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}


$(document).ready(function(){   
    var param_scroll = getParameterByName('id');
    if(param_scroll){
        $('html, body').animate({
            scrollTop: $("#"+param_scroll).offset().top
        }, 3000);   
    }
});


</script>

Answer 4

jQuery not required if you implemented this fucntion:

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

in this case you link should be:

<a href="#anchorName">my_link</a>