Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Scroll to Anchor on Same Page

    General Discussion
    2
    5
    888
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • edgrbnz
      edgrbnz last edited by 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:4567/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!

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        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:4567/topic/2863/link-to-anchor-from-another-page/4

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

        Otherwise let us know.

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • edgrbnz
          edgrbnz last edited by 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!

          1 Reply Last reply Reply Quote 0
          • edgrbnz
            edgrbnz last edited by

            This post is deleted!
            1 Reply Last reply Reply Quote 0
            • mariusjopen
              mariusjopen Global Moderator last edited by

              Dear @edgrbnz
              ah great! Thank you for sharing.

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

              Best!

              Marius

              www.mariusjopen.world

              1 Reply Last reply Reply Quote 0
              • First post
                Last post

              Before you post

              Use the Search Feature. Maybe there is already a solution to your issue.

              1. Update Lay Theme and all Lay Theme Addons
              2. Disable all Plugins
              3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
              4. Now see if your problem solved itself
              5. Go here, see if your problem is listed here:
              Troubleshooting

              When you post:
              1. Post a link to where the problem is
              2. If the problem is difficult to explain, post screenshots / link to a video to explain it

              Thanks!

              Online Users

              C
              B
              F
              A
              G
              D

              Recent Topics

              • K

                Unable to update lay theme / to login wp admin

              • S

                Theme crashed - because of Polylang?

              • A

                New button feature not available

              • A

                carousel addon not working after update

              laytheme.com