Lay Theme Forum

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

    Auto-scroll to an anchor in front page by clicking on a project page link

    General Discussion
    3
    10
    716
    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.
    • H
      huertels last edited by

      Hey there!

      I found something similar from 2016 posts but not sure if they were asking for the same as me.

      I'm trying to make an animated auto-scroll to an anchor of the front page <div id="work"> by clicking on a link which is on a project <a href="http.../#work">.

      Right now the auto-scroll is not working. Am I missing something?

      What should I add to get the animation too?

      Thanks!

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

        Dear @huertels

        did you have a look here?
        http://laythemeforum.com:4567/topic/2863/link-to-anchor-from-another-page/4
        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • H
          huertels last edited by

          @mariusjopen sorry, I didn't. It worked, thank you very much!

          1 Reply Last reply Reply Quote 0
          • H
            huertels last edited by

            I'm having a little problem. If the anchor is after a thumbnail grid, first it auto-scrolls to the position and then it loads the content of the grid, so the anchor gets out of the screen.

            Can it be added a delay to get sure first it loads the grid and then it finds the position of the anchor?

            Thanks!

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

              Dear @huertels
              I will check with Armin about that.

              Best!

              Marius

              www.mariusjopen.world

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

                hey! we'll need to make the page render only when the thumbnailgrid has loaded one day.

                there is a javascript event for when a thumbnailgrid has rendered, hope that helps!

                window.laytheme.on('thumbnailgrid_rendered', function(category_id){ console.log(category_id); });
                
                1 Reply Last reply Reply Quote 0
                • H
                  huertels last edited by

                  Hey!

                  It worked for me using this:

                  <script>
                  window.laytheme.on('thumbnailgrid_rendered', 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>

                  But now I find another problem. I have two different anchors: one is before the grid (#work) and the other one is after the link (#contact). If I want to go to the first anchor everything's right, but when it auto-scrolls to the second anchor, the animation speed seems too fast.

                  I guess there's a possible solution but I don't know how to code it. It would be different animation durations for each anchor. The logic would be something like: if anchor is #work = X duration; if anchor is #contact = Y duration.

                  Does it makes sense? There's another better solution? Can you help me with it?

                  Thank you very much!

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

                    Dear @huertels
                    yes. Because the speed is set. You have to write a code which calculates the difference between the two anchors and then adjusts the scroll-speed.

                    It is not very complicated. But might take some time. Are you familiar with jQuery?

                    Best!

                    Marius

                    www.mariusjopen.world

                    H 1 Reply Last reply Reply Quote 0
                    • H
                      huertels @mariusjopen last edited by

                      @mariusjopen not really, I'm starting right now studying JavaScript but I should close this project a month ago and I don't know how long is going to take me to learn enough to get this.

                      Is it too much asking for help on this?

                      Best!

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

                        Dear @huertels
                        to make this good it is too much for the forum support right now.

                        Is there a way that you can work around it if this is such an issue?
                        Maybe you can make it without the adjusted scroll speed and then later, when you learned more do the fix…

                        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

                        H
                        S
                        S

                        Recent Topics

                        • S

                          New fade-in / opacity bug?

                        • A

                          Unable to update lay theme / to login wp admin

                        • A

                          New button feature not available

                        • S

                          Theme crashed - because of Polylang?

                        laytheme.com