Anchor Links on another page
-
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 emailPS: 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.
-
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.aspAnd 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!
-
Thank you @arminunruh !
Hope to finish it this weekI 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?
-
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/4I 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.
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- 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:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it