在网页设计中，页面滚动是常见的交互方式之一。在滚动页面时，有时需要让页面平滑滚动，以提高用户体验。为了实现平滑滚动效果，可以使用CSS的scroll-behavior和JavaScript的scrollIntoView方法。本文将分别介绍这两种方法，并分析它们各自的优缺点。
CSS scroll-behavior
CSS scroll-behavior属性可以控制页面滚动时的滚动行为，包括是否平滑滚动、滚动时间等。它可以很方便地实现页面平滑滚动效果，并且使用简单。
例如，下面的代码将会使页面在点击后平滑滚动到锚点处：
html {
scroll-behavior: smooth;
}
在这个例子中，只需要在html元素上设置scroll-behavior属性即可。smooth表示平滑滚动效果。此外，还可以设置其他属性，如scroll-behavior: auto（默认值，不平滑滚动）、scroll-behavior: instant（瞬间滚动）等。
需要注意的是，scroll-behavior属性目前仅在Chrome、Firefox和Safari浏览器中得到支持，在其他浏览器中可能无法正常工作。
JS scrollIntoView
JavaScript的scrollIntoView方法可以将元素滚动到可视区域内，并且可以平滑滚动或者瞬间滚动。
例如，下面的代码将会使页面在点击后平滑滚动到锚点处：
document.querySelector('#element').scrollIntoView({ behavior: 'smooth' });
在这个例子中，使用querySelector方法获取元素，并调用scrollIntoView方法将该元素滚动到可视区域内，behavior属性设置为smooth表示平滑滚动效果。也可以设置为instant表示瞬间滚动。
需要注意的是，scrollIntoView方法是JavaScript原生的API，因此支持性较好，并且可以通过polyfill库实现兼容。
比较
CSS scroll-behavior和JavaScript的scrollIntoView方法各有优缺点，具体可以根据实际需求进行选择。
CSS scroll-behavior方式简单易用，只需要在html元素上设置一个属性即可，不需要编写复杂的JavaScript代码；而且它可以实现统一的页面平滑滚动效果，从而提高用户体验。但目前仅在Chrome、Firefox和Safari浏览器中得到支持，在其他浏览器中可能无法正常工作。
JavaScript的scrollIntoView方法更加灵活，可以精确控制滚动的元素、滚动行为等，并且支持性较好。不过，它需要编写JavaScript代码，可能需要处理一些兼容性问题。
综上所述，应该根据实际需求进行选择。如果需要实现简单的页面平滑滚动效果，可以使用CSS scroll-behavior方式；如果需要更加灵活的控制和更好的兼容性，可以使用JavaScript的scrollIntoView方法。
