Scroll to Anchor on Same Page

[edgrbnz]

Hi everyone,

I’m right now helping out a colleague with his one page layout in LayTheme. He loves it!

Since it’s a one-pager he wanted to have a “about” in the menu and make that scroll down to the section with the respective anchor.
We already setup everything following this topic:
http://laythemeforum.com/topic/2863/link-to-anchor-from-another-page/4

So it’s all working now when the user visits http://tldomain.com#about the site loads and then smoothly scrolls down to the anchor. But when the user is on the front page and clicks on the about link in the menu the hole page just snaps to the anchor point w/o any smooth sroll transition.

<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>

I'm sorry if this has been solved already somewhere in the forum. I was unable to find a good solution, though.

Any help is very much appreciated!

[mariusjopen]

Dear @edgrbnz
the code you show us here does the following:

• see if there is a # in the url
• scroll to the id behind the #
• animate the scrolling

It is not for when you click on a link.
You need another function for this.

I have those two threads bookmarked. I hope you can find a solution there.

ANCHOR LINK
http://laythemeforum.com/topic/2863/link-to-anchor-from-another-page/4

SMOOTH LINK
http://laythemeforum.com/topic/2144/fade-effect-smooth-transitions-links-via-custom-html/2

Otherwise let us know.

Best!

Marius

[edgrbnz]

Well!

I just added

html {
  scroll-behavior: smooth;
}

which does the trick. But it doesn’t get recognized by laytheme’s Custom CSS section to be valid code. It says: Unknown property: scroll-behavior. It works!

[edgrbnz]

This post is deleted!

[mariusjopen]

Dear @edgrbnz
ah great! Thank you for sharing.

Yes, even though things do not get recognized – they get recognized :-)

Best!

Marius