Lay Theme Forum

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

    Anchor Links on another page

    General Discussion
    2
    4
    1470
    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.
    • D
      danielfvmartins last edited by

      Hey @arminunruh!

      I'm not sure how to make an anchor link to another page. I've already tried a few things but with no results unfortunately.

      Could you give me a little help?

      http://www.daniel-martins.com/
      i'm gonna send you the login details via email

      PS: There's a simple (working) anchor link on the bottom of the main page, however i'd like to have it on the About page with the anchor tag on the homepage.

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

        Hey Daniel, thanks for your email.

        Very nice website and work.

        <script>
            jQuery(document).on("click", "a[href*=#]", function(e){
                e.preventDefault();
                var targetId = jQuery(this).attr("href");
                jQuery('html, body').animate({
                    scrollTop: jQuery(targetId).offset().top,
                },
                {
                    duration: 1200,
                    easing: "easeOutSine"
                });
            });
        </script>
        

        Your js works on your frontpage but on your about page it creates an error when you click on the link, look at your browser console and you'll see it.

        I think it's best if you check if you are on the frontpage and just use the js then. Like this:

        <script>
            jQuery(document).on("click", "a[href*=#]", function(e){
        if(jQuery("body").hasClass("slug-home")){
                e.preventDefault();
                var targetId = jQuery(this).attr("href");
                jQuery('html, body').animate({
                    scrollTop: jQuery(targetId).offset().top,
                },
                {
                    duration: 1200,
                    easing: "easeOutSine"
                });
        }
            });
        </script>
        

        Now if you want to scroll to the id on the homepage when someone has arrived on the page with the hash #array then use js to get the hash:
        https://www.w3schools.com/jsref/prop_loc_hash.asp

        And inside the newpageshown event http://laytheme.com/documentation.html#newpage-events

        check if you are on your homepage, get the hash and then scroll to the element with the id of the hash.

        good luck!

        1 Reply Last reply Reply Quote 0
        • D
          danielfvmartins last edited by

          Thank you @arminunruh !
          Hope to finish it this week

          I don't know much about js, but i tried to do what you said and it worked (thanks!), however, now it doesn't animate the scroll on the same page anchor. How can i fix this?

          0_1502844607659_Captura de ecrã 2017-08-16, às 01.45.03.png

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

            Hey this is a very old topic and I think I have forgot to answer. This is just for everybody seeing this topic later on.

            Please use this code:

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

            Find the full explanation here:
            http://laythemeforum.com:4567/topic/2863/link-to-anchor-from-another-page/4

            I think the reason why with your code it didn't animate is maybe because the easing "easeOutSine" doesn't exist.
            Also the above code is better cause it will work on any page.

            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

            T
            D
            S

            Recent Topics

            • A

              Unable to update lay theme / to login wp admin

            • A

              New button feature not available

            • S

              Theme crashed - because of Polylang?

            • A

              carousel addon not working after update

            laytheme.com