Anchor links jumping and not scrolling?

So when using anchor links, like “#faq” and the css ID is on the site, it scrolls nicely to the section. But lets say you’re on another page, so instead you have to use the “https://domain.com/ and #faq” Now this works, but it seems to have disabled the nice scrolling effect completely - even if you’re already on the site where the FAQ section is…is there a better way to do this? :sweat_smile:

I have the exact same problem on https://projact.asb-hessen.de. This one-pager’s main menu is full of anchors, and to make it work on other pages, too (e.g. privacy policy), I need to introduce a leading slash at the very least. Boom, scroll effect gone. Any workaround?

If u use the plugin “scroll to id” (it’s free) then it works on every site with the smooth scrolling.

Thanks for this! But really hope that Bricks will fix this eventually…seems a little much to have an extra plugin for such a “basic” feature.

I thought since the beginning that bricks does not have this smooth scrolling :see_no_evil:
Would be very nice, when we don’t need a additional plugin. :slight_smile:

Smooth scrolling is included in Bricks. Do you happen to have any JavaScript errors in the console? What browser are you using?

This is working for me:
html {
scroll-behavior: smooth;
scroll-padding-top: 140px;
}

1 Like

As mentioned above, smooth scrolling works until you use a full url, or even just a leading slash.

#anchor

» smooth scrolling works

https://www.something.com/#anchor
/#anchor

» No smooth scrolling

Issue is reproducible on Chrome, Edge, Opera and Firefox on Linux Mint 21 and Firefox on Windows 10 (running in VirtualBox). You can test it right now on https://projact.asb-hessen.de:

Note that on Win10, at least in VirtualBox, smooth scrolling does not work at all on Edge, Chrome or Opera. o.O

That CSS rule works! Nice, thanks!

1 Like

I see what you mean now. Looking through the javascript, the selector is only targeting links that start with # (as your video displayed) and the CSS solution posted above is the best solution for now.

Sounds good for now, thanks for following up :slight_smile:

How do you apply that code to Bricks? Tried to add it to “custom CSS” but nothing happens.

I use WP Customizer > Additional CSS.

Interestingly, I, too, found Bricks > Settings > Custom code > Custom CSS box to be somewhat unreliable - or I don’t get it. I am @importing a CSS file there that I’m hosting elsewhere and I find that whatever I put into that file only loads inside the builder, not when Bricks is not active, including on the front end for visitors.

When I add this code to Customs CSS under bricks, settings the page when loaded scrolls up. I have a sticky menu so when I use the anchor links I need to add space.

1.7.1 seems to break smooth scrolling but
scroll-behavior: smooth; seems to fix it again, thankfully!
UPDATE: Scrub that! It’s a setting in 1.7.1 now :wink:

1 Like

Thanks for this info

Same here on 1.7.3, the anchor link (like #whatever) doesn’t do any scroll but just jump to the section, not a good practice, could anyone give a fix or a turnaround for this? @timmse Thanks!

Bricks > Settings > General > Smooth Scroll (CSS)

2 Likes

Ohhhh thanks! Totally overlooked :slight_smile:

Happy to help :slight_smile: Took me a moment, too, when 1.7.1 came around!