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

[huertels]

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!

[mariusjopen]

Dear @huertels

did you have a look here?
http://laythemeforum.com:4567/topic/2863/link-to-anchor-from-another-page/4
Best!

Marius

[huertels]

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

[huertels]

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!

[mariusjopen]

Dear @huertels
I will check with Armin about that.

Best!

Marius

[arminunruh]

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); });

[huertels]

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!

[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

[huertels]

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

[mariusjopen]

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