Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Auto-scroll to an anchor in front page by clicking on a project page link

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

Scheduled Pinned Locked Moved General Discussion
10 Posts 3 Posters 1.0k Views
  • 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 Offline
    H Offline
    huertels
    wrote on last edited by
    #1

    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
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      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
      0
      • H Offline
        H Offline
        huertels
        wrote on last edited by
        #3

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

        1 Reply Last reply
        0
        • H Offline
          H Offline
          huertels
          wrote on last edited by
          #4

          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
          0
          • mariusjopenM Offline
            mariusjopenM Offline
            mariusjopen
            Global Moderator
            wrote on last edited by
            #5

            Dear @huertels
            I will check with Armin about that.

            Best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply
            0
            • arminunruhA Offline
              arminunruhA Offline
              arminunruh
              Global Moderator
              wrote on last edited by
              #6

              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
              0
              • H Offline
                H Offline
                huertels
                wrote on last edited by
                #7

                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
                0
                • mariusjopenM Offline
                  mariusjopenM Offline
                  mariusjopen
                  Global Moderator
                  wrote on last edited by
                  #8

                  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
                  0
                  • mariusjopenM mariusjopen

                    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

                    H Offline
                    H Offline
                    huertels
                    wrote on last edited by
                    #9

                    @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
                    0
                    • mariusjopenM Offline
                      mariusjopenM Offline
                      mariusjopen
                      Global Moderator
                      wrote on last edited by
                      #10

                      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
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      I also code custom websites or custom Lay features.
                      💿 Email me here: 💿
                      info@laytheme.com

                      Before you post:
                      1. When using a WordPress Cache plugin, disable it or clear your cache.
                      2. Update Lay Theme and all Lay Theme Addons
                      3. Disable all Plugins
                      4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                      This often solves issues you might run into

                      When you post:
                      1. Post a link to where the problem is
                      2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                      3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                      Online Users
                      J
                      joackim
                      C
                      craigfeldspar
                      Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                      laytheme.com
                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Search