Topic: Linked featured image should be equipped with the class smooth-scroll

Stefanie
June 29, 2025 at 6:30 am

Hi team,

on this page the upper picture (featured image) was linked and jumps to the title of the page.
The link should be equipped with smooth-scroll.

But where should I set this? If I assign the class smooth-scroll to the image, then not the link gets this class, but the image itself.

And then of course it does not work with smooth-scroll.

How do you have to do it?

Thank you!
Alvind
June 29, 2025 at 7:36 pm

Hi there,

Try adding the link and the class to the container that wraps the image, rather than to the image itself.
Stefanie
June 30, 2025 at 4:28 am
Hi there,

thanks that works.
But unfortunately the link ends up way too far down and the header then covers the headline.

I have this css in my child theme, but it doesn’t seem to do anything…
```
[id] {
  scroll-margin-top: 56px;
}
```
Ying
June 30, 2025 at 8:20 am

Can you remove the smooth-scroll class from the image?

Let me know when it’s done.
Stefanie
June 30, 2025 at 8:35 am

Hi Ying,

the image has no smooth-scroll class.

I did it the way Alvind suggested.
Ying
June 30, 2025 at 9:31 am

Can you remove the smooth-scroll class, no matter where it was added?
Stefanie
June 30, 2025 at 9:39 am

Ok, yes I did that now.
Ying
June 30, 2025 at 9:44 am
Now the scroll-margin-top CSS works.

So from now on, do NOT use the smooth-scroll class anymore, as now browsers can smooth scroll with just CSS:
```
html, body {
    scroll-behavior: smooth;
}
```
Stefanie
June 30, 2025 at 12:20 pm

Thanks for your answer.

But I only want to use the scroll-behavior: smooth for certain links, not for the entire site.
The navigation, for example, should also jump to certain IDs, but not with smooth.

How can I set it so that it only applies on this page (in this Element) for the #title?
Ying
June 30, 2025 at 1:45 pm

In this case, you need to use smooth-scroll class as it’s triggered by JS.

But it conflicts with the scroll-margin-top CSS, so you will need to write custom JS to overcome this issue, or use GP’s sticky navigation.
Stefanie
July 2, 2025 at 1:24 am

But it conflicts with the scroll-margin-top CSS, so you will need to write custom JS to overcome this issue

I see.
Then it remains with “hard scroll”.

Thanks 🌷
Ying
July 2, 2025 at 7:01 am

You are welcome 🙂

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Linked featured image should be equipped with the class smooth-scroll