Anchor links within project overlay issues

[rospax]

Hello @arminunruh,

I have my project pages set up as overlays, example here.
Each page consists of 2 browser height rows.

What I'm aiming for is the anchor link when clicking "read more" button smoothly scrolls you down to the project text row, below the carousel of images.

I have achieved this using the css:

html {
scroll-behavior: smooth!important;
}

There are two issues with this:

1. the smooth scroll works when the page is re-loaded (i.e. not in overlay mode) but the css seems ineffective when the overlay is active, it just jumps down super fast.

2. When overlay is active, the anchor link jumps to correct point (top of the row) but when the page is reloaded the anchor jumps further down and doesn't seem to respect the browser-height row.

Due to the overlay being active only when navigating within the site (i.e. not when you arrive from google or another link) it's important that both "versions" of the page behave in the same way.

I hope that all makes sense - Any ideas what I am missing here?

Thanks for all your brilliant work and help so far!

[rospax]

OK - I figured out point no. 2, had the wrong settings.

Would still love some help with point 1, just getting a smoother scroll in the overlay mode :)

Thanks,

[arminunruh]

hey so you can use anchors:
https://laytheme.com/documentation/jump-to-anchor.html

doing this, you wont need

html {
scroll-behavior: smooth!important;
}

because using the built in way, theoretically it should already smooth scroll.
also you can use the settings:

in Lay Options.

however, if you want to code your own scrolling logic, you need to be aware that not only the html element scrolls.

in a project overlay, the element #lay-project-overlay scrolls
in a page overlay, the element .lay-overlay>.lay-content scrolls

so your css could be:

html, body,
#lay-project-overlay,
.lay-overlay>.lay-content{
scroll-behavior: smooth!important;
}

[arminunruh]

or if you use javascript:

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

both of these functions can be used with
behavior: "smooth",
optionally

[rospax]

Thanks @arminunruh , the CSS targeting the overlay did the trick, although it's not super smooth it's a big improvement!

I'm sure there's a way to fine tune it with JS but that's probably beyond my skill level.

Many thanks!