javascript - 有没有办法使页面内的所有链接平滑滚动？

Question

有没有办法通过 CSS 和作为后备 JavaScript(但仅作为最后的手段)使页面内的所有链接平滑滚动。

我看过 this answer但它使用 jQuery 和 JavaScript。

我更喜欢纯 CSS 解决方案，例如:

link {
    scrolling: smooth;
}

Answer 1

使用 CSS 滚动行为(某些浏览器可能不支持):

html {
  scroll-behavior: smooth;
}

<a href="#last">Last paragraph</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit erat id ex luctus facilisis et vitae enim. Vestibulum congue gravida quam, in mollis arcu varius in. Mauris imperdiet malesuada velit, id cursus eros vulputate nec. Sed congue sollicitudin nulla eget luctus. Integer ut quam a diam pellentesque ultrices quis a ligula. Quisque sed lorem suscipit, pulvinar risus nec, molestie est. Aliquam scelerisque scelerisque massa et scelerisque. Quisque leo urna, pharetra in sapien quis, lacinia dapibus nulla. Donec dignissim semper magna, sed fermentum quam luctus sed.

In venenatis dui sed condimentum varius. Ut sit amet semper elit, sit amet vulputate augue. Nulla facilisi. Donec sed consectetur dolor, at molestie tortor. Nulla facilisi. Proin scelerisque a nulla sodales efficitur. Praesent turpis erat, vestibulum vel efficitur id, porttitor vel arcu. Maecenas ex mauris, molestie nec nisi id, aliquet mattis eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent molestie, leo in aliquet pretium, metus dolor congue ligula, sed porta arcu tortor at elit. Vivamus dapibus mauris venenatis enim finibus tempor.

Vivamus ultrices nibh pellentesque laoreet condimentum. Curabitur rutrum eget odio eget consequat. Ut vel lorem ullamcorper, congue tellus non, convallis felis. Integer vulputate blandit elementum. Praesent dapibus malesuada enim, nec suscipit nulla laoreet a. Nunc mauris purus, vestibulum vel nisl bibendum, pretium venenatis erat. Nulla ut orci sit amet neque fringilla tempus.

Aenean vel sodales metus. Sed tincidunt risus quam, non maximus mi dictum vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Pellentesque sollicitudin vulputate diam, non dignissim enim mattis blandit. In a scelerisque tellus. Nulla et urna varius, sodales nulla et, posuere justo. Vivamus in pharetra nibh. In vestibulum ante eget lacinia tincidunt. Aenean dignissim mauris in lacus vehicula, eu ultricies erat tristique. Ut nulla odio, venenatis vitae ornare quis, elementum non erat. Proin tristique massa id aliquet posuere.

Nam vitae eros non ante luctus volutpat ut eget est. Nulla pharetra odio nisl, at ultrices orci congue quis. Aliquam quis sem sed ligula tincidunt posuere quis sit amet nibh. Aenean arcu sapien, blandit in tristique vel, placerat vitae mauris. Mauris et mauris massa. Vivamus at nisl dictum, facilisis ligula ut, pharetra elit. Morbi scelerisque diam in diam posuere, id tempus ex ultrices. Praesent dictum ipsum in urna vehicula congue. Praesent lobortis lorem mauris, ut interdum risus convallis sit amet. Fusce vitae ultrices nunc. Integer at quam nibh. Praesent aliquet rutrum nisl sit amet interdum. Donec sodales metus vel lectus gravida ornare.

Nulla non augue efficitur, molestie neque ut, euismod augue. Sed nulla est, faucibus et augue eu, sodales finibus ante. Curabitur ex elit, laoreet nec porta vitae, rutrum vitae purus. Sed semper finibus pellentesque. Maecenas vel metus risus. Curabitur ut arcu cursus, dapibus velit varius, interdum massa. Donec aliquam libero at elit interdum hendrerit. Vivamus elementum quam ac porttitor euismod. Praesent ipsum elit, fringilla vel pharetra in, fringilla id tellus. Suspendisse et justo mattis tellus mollis suscipit eget quis ex. Proin sed faucibus mi. Maecenas viverra felis eget leo pharetra, non volutpat sem fermentum. Cras tincidunt ipsum non euismod elementum. Morbi in varius arcu, sit amet facilisis ipsum. Donec a justo a mauris tempus pharetra. Fusce suscipit ornare libero, consequat hendrerit nisi mattis sit amet.

Duis pulvinar justo non tellus lobortis, eu posuere orci rutrum. Praesent dignissim scelerisque enim, et mattis turpis sollicitudin sagittis. Fusce sodales nulla eu ex blandit, ac commodo quam ornare. Etiam in erat nisi. Duis porttitor hendrerit faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam at egestas mauris. Vivamus eleifend nulla facilisis augue porttitor, in sagittis enim gravida. Quisque eget magna a libero vulputate malesuada. Morbi sapien urna, mattis sit amet tellus quis, laoreet feugiat ipsum. Nullam vel augue vel orci convallis congue id sed ex. Proin luctus id elit et suscipit. Vestibulum ac mattis odio.

Donec velit sapien, mollis at vestibulum ut, venenatis non lectus. Nulla facilisi. Fusce sagittis elit commodo bibendum posuere. Nullam vitae nunc vestibulum, tempor erat quis, sagittis eros. Suspendisse lobortis nec leo in auctor. Donec sit amet purus ac ante imperdiet placerat non non lectus. Integer a massa sed ipsum congue faucibus. Integer erat dolor, maximus sed est non, tincidunt blandit nunc. In lobortis elit at mi molestie tempor.

Phasellus lacinia erat sit amet enim condimentum, vitae accumsan magna tincidunt. Integer imperdiet malesuada leo. Integer et mi ipsum. Proin nulla turpis, auctor in commodo ut, fermentum vitae risus. Morbi consequat ipsum libero, id finibus ante placerat id. Proin elementum luctus nunc id tristique. Proin tellus mauris, eleifend vitae hendrerit eget, varius vel ante. Ut dignissim metus at fermentum laoreet. Phasellus eu vestibulum mi, et tristique orci. Sed pulvinar porta commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam id odio non purus suscipit congue vel ut nunc. Morbi porttitor sed ligula ac vehicula. In fermentum ipsum sit amet lacinia pharetra. Nunc sed neque vel mauris ultrices rhoncus.

<span id="last">In auctor in leo nec sollicitudin. Nam viverra lectus nibh, semper lacinia diam tristique ac. Vestibulum id mauris ac dui accumsan tempus. Donec feugiat augue sed felis facilisis porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla imperdiet auctor dui ut porta. Nullam fringilla mollis eros et ultricies. Maecenas cursus enim posuere sapien interdum sollicitudin. Aenean hendrerit nunc risus, sed rhoncus nisi tempus ut.</span></p>