Anchor Links on another page

[danielfvmartins]

Hey @arminunruh!

I'm not sure how to make an anchor link to another page. I've already tried a few things but with no results unfortunately.

Could you give me a little help?

http://www.daniel-martins.com/
i'm gonna send you the login details via email

PS: There's a simple (working) anchor link on the bottom of the main page, however i'd like to have it on the About page with the anchor tag on the homepage.

[arminunruh]

Hey Daniel, thanks for your email.

Very nice website and work.

<script>
    jQuery(document).on("click", "a[href*=#]", function(e){
        e.preventDefault();
        var targetId = jQuery(this).attr("href");
        jQuery('html, body').animate({
            scrollTop: jQuery(targetId).offset().top,
        },
        {
            duration: 1200,
            easing: "easeOutSine"
        });
    });
</script>

Your js works on your frontpage but on your about page it creates an error when you click on the link, look at your browser console and you'll see it.

I think it's best if you check if you are on the frontpage and just use the js then. Like this:

<script>
    jQuery(document).on("click", "a[href*=#]", function(e){
if(jQuery("body").hasClass("slug-home")){
        e.preventDefault();
        var targetId = jQuery(this).attr("href");
        jQuery('html, body').animate({
            scrollTop: jQuery(targetId).offset().top,
        },
        {
            duration: 1200,
            easing: "easeOutSine"
        });
}
    });
</script>

Now if you want to scroll to the id on the homepage when someone has arrived on the page with the hash #array then use js to get the hash:
https://www.w3schools.com/jsref/prop_loc_hash.asp

And inside the newpageshown event http://laytheme.com/documentation.html#newpage-events

check if you are on your homepage, get the hash and then scroll to the element with the id of the hash.

good luck!

[danielfvmartins]

Thank you @arminunruh !
Hope to finish it this week

I don't know much about js, but i tried to do what you said and it worked (thanks!), however, now it doesn't animate the scroll on the same page anchor. How can i fix this?

[arminunruh]

Hey this is a very old topic and I think I have forgot to answer. This is just for everybody seeing this topic later on.

Please use this code:

<script>
    window.laytheme.on('newpageshown', function(){
       if(window.location.hash.length > 0){
           var id = window.location.hash;
           if(jQuery(id).length > 0){
                jQuery('html, body').animate(
                { scrollTop: jQuery(id).offset().top },
                { duration: 1200 });
           }
       } 
    });
</script>

Find the full explanation here:
http://laythemeforum.com:4567/topic/2863/link-to-anchor-from-another-page/4

I think the reason why with your code it didn't animate is maybe because the easing "easeOutSine" doesn't exist.
Also the above code is better cause it will work on any page.