Forums

CSS (scroll-behavior: smooth;) not working in Custom CSS - Smooth anchor scrolling

Permalink
I want a smooth scroll to a certain anchor from a button. It jumps to the anchor instead of scrolling.

So I added the following to the custom CSS.
.html{
scroll-behavior: smooth;
}


When I add this manually in the debugger from FF it's working perfect. However, the custom CSS won't add the stylerule to the output. I've cleared my cache but the site won't have it and I don't want to put it hardcoded (due to updates) in the css files.

What can I do or why is it ignored?
FischerVision
 
ConcreteOwl replied on at Permalink Best Answer Reply
ConcreteOwl
Try removing the dot in front of html
Like this
html {
  scroll-behavior: smooth;
}
FischerVision replied on at Permalink Reply
FischerVision
Wauw..... That was it.. Logical afterwards, since html isn't a class..

Thanks!
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
You are Welcome.
SkylineFX replied on at Permalink Reply
I have the same problem, although I wrote it just like you, without the class.
Do you know what I could do?

Nevermind, I got it. It's been about a week I couldn't resolve this and and I remembered I deactivated smooth-scrolling from System Properties
linuxoid replied on at Permalink Reply
linuxoid
Try adapting the following:
<div class="ab-link-blink">
    <a href="<?php echo $url; ?>" class="smooth-scroll"><?php echo $link_string; ?></a>
</div>

$(document).ready(function() {
    $('.ab-link-blink a.smooth-scroll').on('click', function(e) {
        if (this.pathname == window.location.pathname && this.protocol == window.location.protocol && this.host == window.location.host) {
            if (this.hash !== "") {
                e.preventDefault();
                var hash = this.hash;
                $('html, body').animate({
                    scrollTop: $(hash).offset().top
                }, 800, function() {
                        window.location.hash = hash;
                    }
                );
            }
        } else {
            window.location = window.location;
Viewing 15 lines of 18 lines. View entire code block.

where the link_string is something like
http://your-site/page-name#scroll-to-id...

and the 800 is a period in ms to smoothly scroll to the id="scroll-to-id" on the page