Auto-scroll to an anchor in front page by clicking on a project page link
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!
Dear @huertels
did you have a look here?
http://laythemeforum.com:4567/topic/2863/link-to-anchor-from-another-page/4
Best!
Marius
@mariusjopen sorry, I didn't. It worked, thank you very much!
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!
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); });
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!