Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is scroll-behavior:smooth not working but javascript window.scroll smooth is?

I have a navigation bar to scroll down to anchor elements. The navbar is inside the body.

My css :

body {
        scroll-behavior: smooth;
}

In the page, I also use some javascript. One is a javascript with the following function to navigate to other page elements :

window.scroll({
    top : pos,
    left : 0,
    behavior : 'smooth'
});

With Chrome, when I call the javascript function, the scroll is smooth. But when I navigate to anchors through navigation bar links, it is not smooth.

Would someone care to explain me why ?

Also with Firefox both scroll from navigation bar & javascript function are smooth. I think it's a bit wierd that one work but not the other.

EDIT : my workaround is as follow (vanilla JS / works with all modern browsers) :

    let pos = document.querySelector(element).offsetTop;
    if ('scrollBehavior' in document.documentElement.style) { //Checks if browser supports scroll function
        window.scroll({
            top : pos,
            left : 0,
            behavior : 'smooth'
        });
    } else {
        smoothScrollTo(0, pos, 500); //polyfill below
    }

And the fallback scroll function :

window.smoothScrollTo = function(endX, endY, duration) {
        let startX = window.scrollX || window.pageXOffset,
        startY = window.scrollY || window.pageYOffset,
        distanceX = endX - startX,
        distanceY = endY - startY,
        startTime = new Date().getTime();

        // Easing function
        let easeInOutQuart = function(time, from, distance, duration) {
            if ((time /= duration / 2) < 1) return distance / 2 * time * time * time * time + from;
            return -distance / 2 * ((time -= 2) * time * time * time - 2) + from;
        };

        let timer = window.setInterval(function() {
            let time = new Date().getTime() - startTime,
            newX = easeInOutQuart(time, startX, distanceX, duration),
            newY = easeInOutQuart(time, startY, distanceY, duration);
            if (time >= duration) {
                window.clearInterval(timer);
            }
            window.scrollTo(newX, newY);
        }, 1000 / 60); // 60 fps
    };
like image 328
Ado Ren Avatar asked Apr 03 '18 18:04

Ado Ren


3 Answers

Based on documentation, scroll-behavior: smooth not working on body element (try it):

The scroll-behavior property of the HTML body element is not propagated to the viewport.

But it works on other selectors like html (try here).

Also you can try pure JavaScript solution (example):

function scrollToTop() {
  window.scrollTo({
    top: 1000,
    behavior: 'smooth'
  });
}
like image 191
Saeed Hassanvand Avatar answered Sep 19 '22 20:09

Saeed Hassanvand


This worked for me:

* {
  scroll-behavior: smooth;
}
like image 37
Normajean Avatar answered Sep 21 '22 20:09

Normajean


It's been some time, but some people have their JavaScript disabled on browsers, so I don't think that would be the best option. The problem with adding: body {scroll-behavior: smooth;} is that it won't work unless you add it to the html. For example:

On body:

body {
  scroll-behavior: smooth;
}

a {
  background-color: lightgray;
  padding: 10px 20px;
  color: black;
  right: 10px;
  margin-bottom: 10px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>No Scroll Effect On Body</title>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida varius turpis, ac dignissim purus molestie quis. Aliquam erat volutpat. Aenean ipsum neque, faucibus ut imperdiet nec, aliquam eget purus. Phasellus ultricies porttitor neque, a porttitor tortor pulvinar non. Phasellus in orci porttitor nulla mattis cursus nec ut ex. Vivamus non elit at dolor imperdiet bibendum. Ut leo dolor, aliquet ut magna eu, hendrerit consequat quam. Pellentesque eget odio felis. Integer id posuere mi. Ut quis velit pulvinar, auctor sem nec, consectetur diam. Fusce sed ex eu sem bibendum aliquam ultrices ut ipsum. In hac habitasse platea dictumst. Aenean imperdiet ex eu velit malesuada volutpat. Sed molestie imperdiet condimentum. In suscipit, nulla nec viverra tristique, dui tellus tristique mi, eget laoreet tortor nunc vel nunc. Nam tristique rutrum vulputate.

Donec imperdiet nisl non ligula ultricies condimentum. Suspendisse nisi est, lobortis vitae enim at, porta mollis erat. Sed in orci nunc. Aliquam non dui et urna volutpat dignissim varius sed nulla. Duis fringilla vestibulum ipsum, a fringilla sapien bibendum vel. Pellentesque non viverra magna, sed laoreet orci. Donec elit eros, imperdiet sit amet risus sed, placerat fermentum sem. In porta felis vulputate, suscipit nisi maximus, fringilla tellus. Vivamus nec dui accumsan, suscipit eros nec, sodales sapien. Mauris et viverra lectus. Curabitur massa quam, lacinia aliquam ante eget, auctor sollicitudin turpis. Phasellus imperdiet eros ornare arcu pulvinar, id cursus arcu volutpat. Nam sit amet magna eu magna suscipit posuere id quis nisi.

Quisque a diam sed magna luctus dignissim sit amet et elit. Vivamus fringilla posuere sapien eu posuere. Proin bibendum libero ac eros maximus vehicula. Sed et diam eu lorem gravida pharetra at sed mauris. Cras dictum urna fringilla quam luctus elementum. Maecenas tincidunt arcu dolor, eget venenatis ex ornare eu. Vestibulum tempor tempus finibus. Mauris posuere, enim eu ornare molestie, quam urna iaculis massa, eu lacinia eros odio ac quam. Sed sem nunc, sollicitudin in imperdiet eu, molestie vel libero. Morbi in dui ut enim pharetra dictum egestas tempus velit. Morbi accumsan justo nec faucibus pulvinar. Ut pellentesque auctor purus. Maecenas id sagittis enim, tempor tristique quam.

Proin condimentum posuere scelerisque. Maecenas egestas vehicula vestibulum. Vestibulum pharetra nunc nec orci scelerisque, fermentum pellentesque quam pretium. Nam odio tortor, aliquet nec sem quis, rutrum ornare lectus. Fusce scelerisque ullamcorper lacus vitae hendrerit. Donec tincidunt quis dolor ut sollicitudin. Vestibulum feugiat diam at odio fringilla, id ullamcorper diam scelerisque. Aenean tempor tincidunt turpis id porttitor. Mauris gravida eleifend lorem, pellentesque cursus odio volutpat et. Mauris est nunc, bibendum congue purus vitae, luctus elementum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<br />
<br />
<br />

<a href="#top">Go to top</a>
</body>
</html>

As you can see, it is not possible to work if it set on the body. But it will work if it set on the html:

html {
  scroll-behavior: smooth;
}

a {
  background-color: lightgray;
  padding: 10px 20px;
  color: black;
  right: 10px;
  margin-bottom: 10px;
}
<!DOCTYPE HTML>
<html>

<head>
  <title>No Scroll Effect On Body</title>
</head>

<body>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida varius turpis, ac dignissim purus molestie quis. Aliquam erat volutpat. Aenean ipsum neque, faucibus ut imperdiet nec, aliquam eget purus. Phasellus ultricies porttitor neque, a
  porttitor tortor pulvinar non. Phasellus in orci porttitor nulla mattis cursus nec ut ex. Vivamus non elit at dolor imperdiet bibendum. Ut leo dolor, aliquet ut magna eu, hendrerit consequat quam. Pellentesque eget odio felis. Integer id posuere mi.
  Ut quis velit pulvinar, auctor sem nec, consectetur diam. Fusce sed ex eu sem bibendum aliquam ultrices ut ipsum. In hac habitasse platea dictumst. Aenean imperdiet ex eu velit malesuada volutpat. Sed molestie imperdiet condimentum. In suscipit, nulla
  nec viverra tristique, dui tellus tristique mi, eget laoreet tortor nunc vel nunc. Nam tristique rutrum vulputate. Donec imperdiet nisl non ligula ultricies condimentum. Suspendisse nisi est, lobortis vitae enim at, porta mollis erat. Sed in orci nunc.
  Aliquam non dui et urna volutpat dignissim varius sed nulla. Duis fringilla vestibulum ipsum, a fringilla sapien bibendum vel. Pellentesque non viverra magna, sed laoreet orci. Donec elit eros, imperdiet sit amet risus sed, placerat fermentum sem. In
  porta felis vulputate, suscipit nisi maximus, fringilla tellus. Vivamus nec dui accumsan, suscipit eros nec, sodales sapien. Mauris et viverra lectus. Curabitur massa quam, lacinia aliquam ante eget, auctor sollicitudin turpis. Phasellus imperdiet eros
  ornare arcu pulvinar, id cursus arcu volutpat. Nam sit amet magna eu magna suscipit posuere id quis nisi. Quisque a diam sed magna luctus dignissim sit amet et elit. Vivamus fringilla posuere sapien eu posuere. Proin bibendum libero ac eros maximus
  vehicula. Sed et diam eu lorem gravida pharetra at sed mauris. Cras dictum urna fringilla quam luctus elementum. Maecenas tincidunt arcu dolor, eget venenatis ex ornare eu. Vestibulum tempor tempus finibus. Mauris posuere, enim eu ornare molestie, quam
  urna iaculis massa, eu lacinia eros odio ac quam. Sed sem nunc, sollicitudin in imperdiet eu, molestie vel libero. Morbi in dui ut enim pharetra dictum egestas tempus velit. Morbi accumsan justo nec faucibus pulvinar. Ut pellentesque auctor purus. Maecenas
  id sagittis enim, tempor tristique quam. Proin condimentum posuere scelerisque. Maecenas egestas vehicula vestibulum. Vestibulum pharetra nunc nec orci scelerisque, fermentum pellentesque quam pretium. Nam odio tortor, aliquet nec sem quis, rutrum ornare
  lectus. Fusce scelerisque ullamcorper lacus vitae hendrerit. Donec tincidunt quis dolor ut sollicitudin. Vestibulum feugiat diam at odio fringilla, id ullamcorper diam scelerisque. Aenean tempor tincidunt turpis id porttitor. Mauris gravida eleifend
  lorem, pellentesque cursus odio volutpat et. Mauris est nunc, bibendum congue purus vitae, luctus elementum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing
  elit. Maecenas gravida varius turpis, ac dignissim purus molestie quis. Aliquam erat volutpat. Aenean ipsum neque, faucibus ut imperdiet nec, aliquam eget purus. Phasellus ultricies porttitor neque, a porttitor tortor pulvinar non. Phasellus in orci
  porttitor nulla mattis cursus nec ut ex. Vivamus non elit at dolor imperdiet bibendum. Ut leo dolor, aliquet ut magna eu, hendrerit consequat quam. Pellentesque eget odio felis. Integer id posuere mi. Ut quis velit pulvinar, auctor sem nec, consectetur
  diam. Fusce sed ex eu sem bibendum aliquam ultrices ut ipsum. In hac habitasse platea dictumst. Aenean imperdiet ex eu velit malesuada volutpat. Sed molestie imperdiet condimentum. In suscipit, nulla nec viverra tristique, dui tellus tristique mi, eget
  laoreet tortor nunc vel nunc. Nam tristique rutrum vulputate. Donec imperdiet nisl non ligula ultricies condimentum. Suspendisse nisi est, lobortis vitae enim at, porta mollis erat. Sed in orci nunc. Aliquam non dui et urna volutpat dignissim varius
  sed nulla. Duis fringilla vestibulum ipsum, a fringilla sapien bibendum vel. Pellentesque non viverra magna, sed laoreet orci. Donec elit eros, imperdiet sit amet risus sed, placerat fermentum sem. In porta felis vulputate, suscipit nisi maximus, fringilla
  tellus. Vivamus nec dui accumsan, suscipit eros nec, sodales sapien. Mauris et viverra lectus. Curabitur massa quam, lacinia aliquam ante eget, auctor sollicitudin turpis. Phasellus imperdiet eros ornare arcu pulvinar, id cursus arcu volutpat. Nam sit
  amet magna eu magna suscipit posuere id quis nisi. Quisque a diam sed magna luctus dignissim sit amet et elit. Vivamus fringilla posuere sapien eu posuere. Proin bibendum libero ac eros maximus vehicula. Sed et diam eu lorem gravida pharetra at sed
  mauris. Cras dictum urna fringilla quam luctus elementum. Maecenas tincidunt arcu dolor, eget venenatis ex ornare eu. Vestibulum tempor tempus finibus. Mauris posuere, enim eu ornare molestie, quam urna iaculis massa, eu lacinia eros odio ac quam. Sed
  sem nunc, sollicitudin in imperdiet eu, molestie vel libero. Morbi in dui ut enim pharetra dictum egestas tempus velit. Morbi accumsan justo nec faucibus pulvinar. Ut pellentesque auctor purus. Maecenas id sagittis enim, tempor tristique quam. Proin
  condimentum posuere scelerisque. Maecenas egestas vehicula vestibulum. Vestibulum pharetra nunc nec orci scelerisque, fermentum pellentesque quam pretium. Nam odio tortor, aliquet nec sem quis, rutrum ornare lectus. Fusce scelerisque ullamcorper lacus
  vitae hendrerit. Donec tincidunt quis dolor ut sollicitudin. Vestibulum feugiat diam at odio fringilla, id ullamcorper diam scelerisque. Aenean tempor tincidunt turpis id porttitor. Mauris gravida eleifend lorem, pellentesque cursus odio volutpat et.
  Mauris est nunc, bibendum congue purus vitae, luctus elementum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  <br />
  <br />
  <br />
  <a href="#top">Go to top</a> </body>

</html>

The good thing about this is that it is a cross-browser solution, as it is very uncommon to find a browser that disabled CSS. I hope this helps.

like image 20
IPSDSILVA Avatar answered Sep 17 '22 20:09

IPSDSILVA