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. Link to Anchor from another page

Link to Anchor from another page

Scheduled Pinned Locked Moved General Discussion
24 Posts 7 Posters 4.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.
  • M Offline
    M Offline
    mariusjopen
    Global Moderator
    wrote on Mar 2, 2018, 10:48 PM last edited by
    #5

    Smooth brother! Smooth! :-D

    Finally!

    www.mariusjopen.world

    1 Reply Last reply
    0
    • D Offline
      D Offline
      diesestudio
      wrote on Sep 14, 2018, 4:18 PM last edited by
      #6

      Hey @arminunruh,

      I was looking exactly for this function!
      Everything works quite fine – but the anchor I want to link to is inside a full screen slide.

      Now I Have the problem that after using the anchor I can't use the Slider anymore and it is not in its right position and there is a white border at the bottom.

      It seems like everything is a bit shiftet. (Screenshot)

      0_1536941878768_Bildschirmfoto 2018-09-14 um 18.12.46.png

      Do you have a solution for that?

      Cheers

      Jonas

      1 Reply Last reply
      0
      • M Offline
        M Offline
        mariusjopen
        Global Moderator
        wrote on Sep 18, 2018, 2:46 PM last edited by
        #7

        Dear @diesestudio
        can you send a link to your website?

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply
        0
        • M Offline
          M Offline
          mrrpringle
          wrote on Sep 26, 2018, 7:36 PM last edited by
          #8

          Hi, this works great for my desktop site, however it seems to malfunction when I try it on mobile. Any thoughts on a solution? Thank you!

          1 Reply Last reply
          0
          • M Offline
            M Offline
            mariusjopen
            Global Moderator
            wrote on Sep 27, 2018, 11:00 AM last edited by
            #9

            Dear @mrrpringle
            can you send a link to your website?

            Best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply
            0
            • M Offline
              M Offline
              mrrpringle
              wrote on Sep 27, 2018, 5:14 PM last edited by
              #10

              Hi, yes here: [http://mackenziepringle.com/hirshhorn

              If you tap 'hide description' on this page on mobile, it seems to anchor to a lower coordinates even though I've assigned the link to anchor back to the top of the project. The 'hide description' link should bring you to http://mackenziepringle.com/hirshhorn/#hirshhorn (works really well on desktop). Thanks in advance for any help here.

              1 Reply Last reply
              0
              • M Offline
                M Offline
                mariusjopen
                Global Moderator
                wrote on Sep 30, 2018, 12:06 PM last edited by
                #11

                Dear @mrrpringle
                you might have a look here:
                https://stackoverflow.com/questions/22643032/anchor-tag-doesnt-work-in-iphone-safari

                Also you can think of an easier way to show and hide the description.
                Have a look into jQuery and Accordeon… You could just hide and show the textbox.

                Best!
                Marius

                www.mariusjopen.world

                1 Reply Last reply
                0
                • M Offline
                  M Offline
                  mrrpringle
                  wrote on Oct 1, 2018, 8:35 PM last edited by
                  #12

                  Cheers Marius! I'll look into it. Thank you.

                  1 Reply Last reply
                  1
                  • M Offline
                    M Offline
                    mariusjopen
                    Global Moderator
                    wrote on Oct 4, 2018, 3:55 PM last edited by
                    #13

                    Great!!!!

                    www.mariusjopen.world

                    1 Reply Last reply
                    0
                    • M Offline
                      M Offline
                      m-czyk
                      wrote on Aug 1, 2019, 1:50 PM last edited by m-czyk Aug 1, 2019, 9:50 AM
                      #14

                      Hello, everybody,

                      I also have the problem that after the latest Laytheme Update an element doesn't work anymore. I have a +-symbol in the upper right corner of the menu (www.studio-boldig.de), where a new menu has opened.

                      The url was after clicking https://studio-boldig.de#sbmenu or https://xy#sbmenu depending on where you were on the site and everything was fine. But now a "/" is inserted in between the url and it loads an empty page (https://studio-boldig.de/#sbmenu). How do I get rid of the "/" now?

                      I use this code:
                      <div>
                      <a class="button" href="#sbmenu">+</a>
                      </div>

                      i am happy about any help
                      best marcin

                      M 1 Reply Last reply Aug 1, 2019, 2:09 PM
                      0
                      • M m-czyk
                        Aug 1, 2019, 1:50 PM

                        Hello, everybody,

                        I also have the problem that after the latest Laytheme Update an element doesn't work anymore. I have a +-symbol in the upper right corner of the menu (www.studio-boldig.de), where a new menu has opened.

                        The url was after clicking https://studio-boldig.de#sbmenu or https://xy#sbmenu depending on where you were on the site and everything was fine. But now a "/" is inserted in between the url and it loads an empty page (https://studio-boldig.de/#sbmenu). How do I get rid of the "/" now?

                        I use this code:
                        <div>
                        <a class="button" href="#sbmenu">+</a>
                        </div>

                        i am happy about any help
                        best marcin

                        M Offline
                        M Offline
                        m-czyk
                        wrote on Aug 1, 2019, 2:09 PM last edited by
                        #15

                        Now it works, but after i opened the menu i can not click on any intern link. just the links who goes outside.

                        1 Reply Last reply
                        0
                        • M Offline
                          M Offline
                          mariusjopen
                          Global Moderator
                          wrote on Aug 2, 2019, 11:50 AM last edited by
                          #16

                          Dear @m-czyk
                          you got many errors in the console.
                          Your JS seems to create a bit of trouble.

                          Best!

                          Marius

                          www.mariusjopen.world

                          M 1 Reply Last reply Aug 3, 2019, 1:11 PM
                          0
                          • mariusjopenM mariusjopen
                            Aug 2, 2019, 11:50 AM

                            Dear @m-czyk
                            you got many errors in the console.
                            Your JS seems to create a bit of trouble.

                            Best!

                            Marius

                            M Offline
                            M Offline
                            m-czyk
                            wrote on Aug 3, 2019, 1:11 PM last edited by
                            #17

                            @mariusjopen thx. i build it with js and now it works.

                            1 Reply Last reply
                            0
                            • mariusjopenM Offline
                              mariusjopenM Offline
                              mariusjopen
                              Global Moderator
                              wrote on Aug 6, 2019, 2:07 PM last edited by
                              #18

                              Dear @m-czyk
                              nice to hear!

                              Marius

                              www.mariusjopen.world

                              1 Reply Last reply
                              0
                              • arminunruhA arminunruh
                                Mar 2, 2018, 5:12 PM

                                Ok so I have an image in page1 and I give it an ID.
                                You can also give a row an ID, doesn't matter. Right click -> set html class and id

                                0_1520010530521_Screen Shot 2018-03-02 at 18.01.44.png

                                Now on another page, I create a link. Here I create a link on an image, but you could also create a link when you edit text. The important part is "#hello".
                                "hello" is the id that I set before.

                                0_1520010512900_Screen Shot 2018-03-02 at 18.02.21.png

                                Now I think Marius' code is probably right, maybe the problem was just that the easing named 'easeOutSine' doesn't exist. Not 100% sure here.
                                Add the following code to "Lay Options" -> "Custom <head> content":

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

                                That code above is cool cause it works for all pages

                                P Offline
                                P Offline
                                pmpm
                                wrote on Feb 19, 2020, 9:13 AM last edited by
                                #19

                                Hey @arminunruh
                                This is great! Just one question. How can I add an offset to this, so it scrolls to the image but always has a gap of 80px above the image?
                                I hope you know what I mean. The problem is that it cuts off the image at the top https://fabienne-fischer.ch/works/#hello
                                Thanks a lot!

                                1 Reply Last reply
                                0
                                • mariusjopenM Offline
                                  mariusjopenM Offline
                                  mariusjopen
                                  Global Moderator
                                  wrote on Feb 19, 2020, 10:00 AM last edited by
                                  #20

                                  Dear @pmpm
                                  can you post the JS code which you use?

                                  Best!

                                  Marius

                                  www.mariusjopen.world

                                  P 1 Reply Last reply Feb 20, 2020, 3:13 PM
                                  0
                                  • mariusjopenM mariusjopen
                                    Feb 19, 2020, 10:00 AM

                                    Dear @pmpm
                                    can you post the JS code which you use?

                                    Best!

                                    Marius

                                    P Offline
                                    P Offline
                                    pmpm
                                    wrote on Feb 20, 2020, 3:13 PM last edited by
                                    #21

                                    @mariusjopen straight out of the youtube tutorial:

                                    <script>
                                        
                                        jQuery(document).on( 'click', 'a[href^="#"]', function(e){
                                            e.preventDefault();
                                            var hash = jQuery(this).attr('href');
                                            var el = jQuery(hash);
                                            var top = el.offset().top;
                                            jQuery('html, body').animate({
                                                scrollTop: top
                                            }, 1200, 'swing',
                                                function() {
                                                    window.location.hash = hash;
                                                }
                                            );
                                        } );
                                        
                                        window.laytheme.on('newpageshown', function(){
                                            var hash = window.location.hash; 
                                            var el = jQuery(hash);
                                            if(el.length > 0) {
                                                var top = el.offset().top;
                                                window.scroll(0, top);        
                                            }
                                        });
                                        
                                    </script>
                                    
                                    1 Reply Last reply
                                    0
                                    • mariusjopenM Offline
                                      mariusjopenM Offline
                                      mariusjopen
                                      Global Moderator
                                      wrote on Feb 21, 2020, 9:48 AM last edited by
                                      #22

                                      Dear @joeclarkx

                                      <script>
                                          
                                          jQuery(document).on( 'click', 'a[href^="#"]', function(e){
                                              e.preventDefault();
                                              var hash = jQuery(this).attr('href');
                                              var el = jQuery(hash);
                                              var top = el.offset().top+80;
                                              jQuery('html, body').animate({
                                                  scrollTop: top
                                              }, 1200, 'swing',
                                                  function() {
                                                      window.location.hash = hash;
                                                  }
                                              );
                                          } );
                                          
                                          window.laytheme.on('newpageshown', function(){
                                              var hash = window.location.hash; 
                                              var el = jQuery(hash);
                                              if(el.length > 0) {
                                                  var top = el.offset().top;
                                                  window.scroll(0, top);        
                                              }
                                          });
                                          
                                      </script>
                                      

                                      Best!

                                      Marius

                                      www.mariusjopen.world

                                      P 1 Reply Last reply Feb 21, 2020, 2:21 PM
                                      0
                                      • mariusjopenM mariusjopen
                                        Feb 21, 2020, 9:48 AM

                                        Dear @joeclarkx

                                        <script>
                                            
                                            jQuery(document).on( 'click', 'a[href^="#"]', function(e){
                                                e.preventDefault();
                                                var hash = jQuery(this).attr('href');
                                                var el = jQuery(hash);
                                                var top = el.offset().top+80;
                                                jQuery('html, body').animate({
                                                    scrollTop: top
                                                }, 1200, 'swing',
                                                    function() {
                                                        window.location.hash = hash;
                                                    }
                                                );
                                            } );
                                            
                                            window.laytheme.on('newpageshown', function(){
                                                var hash = window.location.hash; 
                                                var el = jQuery(hash);
                                                if(el.length > 0) {
                                                    var top = el.offset().top;
                                                    window.scroll(0, top);        
                                                }
                                            });
                                            
                                        </script>
                                        

                                        Best!

                                        Marius

                                        P Offline
                                        P Offline
                                        pmpm
                                        wrote on Feb 21, 2020, 2:21 PM last edited by
                                        #23

                                        Dear @mariusjopen Thanks a lot! It turned out that the script didn't even apply. So now it also works without the js and I found a solution to come to the right position with an empty textfield which contains the id above the image. This works great. But only in Firefox and Chrome. In Safari it seems like the scroll-position is not identical with other browsers. Do you have any clue what the problem could be there?

                                        1 Reply Last reply
                                        0
                                        • mariusjopenM Offline
                                          mariusjopenM Offline
                                          mariusjopen
                                          Global Moderator
                                          wrote on Feb 24, 2020, 11:34 AM last edited by
                                          #24

                                          Dear @joeclarkx
                                          happy you managed!

                                          How can I see your anchor links in action?

                                          Best!
                                          Marius

                                          www.mariusjopen.world

                                          1 Reply Last reply
                                          0
                                          • S sofiapapa08 referenced this topic on Jun 9, 2023, 10:17 AM
                                          • P person5 referenced this topic on Jan 6, 2024, 8:48 PM
                                          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
                                          A
                                          antwal
                                          22 minutes ago
                                          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