Use anchor links and the scroll-behavior property (MDN reference) for the scrolling container:
scroll-behavior: smooth;
Browser support: Firefox 36+, Chrome 61+ (therefore also Edge 79+) and Opera 48+.
Intenet Explorer, non-Chromium Edge and (so far) Safari do not support scroll-behavior and simply "jump" to the link target.
Example usage:
<head>
<style type="text/css">
html {
scroll-behavior: smooth;
}
</style>
</head>
<body id="body">
<a href="#foo">Go to foo!</a>
<!-- Some content -->
<div id="foo">That's foo.</div>
<a href="#body">Back to top</a>
</body>
Here's a Fiddle.
And here's also a Fiddle with both horizontal and vertical scrolling.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
