Menu
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
};
328
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'
});
}
This worked for me:
* {
scroll-behavior: smooth;
}
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.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
