有几种方案可以平滑滚动到顶部或底部

最近，该项目正在做列表展示相关的需求，需要快捷按钮滚动到上下，在参考了社区中的一些文章后，写这篇文章供大家参考：很多时候我们使用的滚动效果类似于锚点，闪烁，给人一种非常不友好的体验。因此，这里有一些平滑滚动的方法。

scroll-beh**ior: auto | smooth | inherit | unset

一般我们可以使用auto和smooth，smooth表示滚动非常平滑并且有过渡效果，auto没有过渡效果，并且一闪而过。如果我们回到顶部，我们可以将这个属性设置为 html。 **如下。

hello, backtotop hello, backtotop hello, backtotop hello, backtotop 省略部分**

返回顶部按钮

CSS 样式：

html

注意：上面我用的是一个标签加 ID，这可能不太好，因为标签的默认行为会给地址添加一个哈希值，这对于 Vue 的路由使用哈希模式会很有问题。

返回顶部。

上面 A 标签的默认行为是有问题的，我们可以通过先在页面上设置 HTML 样式来以更简单的方式做到这一点

html

将事件绑定到您的返回顶部按钮，例如点击事件，并添加我们通常使用的返回顶部**。

window.scrollto(0, 0);

那么，只要你的设备和浏览器支持这个CSS属性，它也会有平滑的过渡效果。

回到底部。回到底部，我们计算 DOM 元素的高度，减去视口的高度，这就是底部。

window.scrollto(0, document.documentelement.scrollheight - window.innerheight);

ios 13.3 Safari 不支持 SmoothiOS 114.1 Safari不支持SmoothGalaxy S9 Android 90 内置浏览器支持 smoothchrome 79 支持流畅

element.scrollintoview();等同于元素scrollintoview(true) element.scrollintoview(aligntotop);布尔类型参数元素scrollintoview(scrollintoviewoptions);对象类型参数

这是浏览器自带的滚动功能，目前是一项新功能，可能很多设备和浏览器都不支持。这感觉比 CSS 更容易使用，只需将此函数绑定到您要滚动的 DOM 元素即可。

滚动到顶部$refs.container.scrollintoview(true);滚动到底部$refs.container.scrollintoview(false);

ios 13.3 Safari 不支持 SmoothiOS 114.1 Safari不支持SmoothGalaxy S9 Android 90 内置浏览器支持 smoothchrome 79 支持流畅

封装一个返回底部或顶部的函数 scrolltotop（position） 以获取当前元素滚动的距离 let scrolltopdistance = documentdocumentelement.scrolltop ||document.body.scrolltop; function smoothscroll() else }smoothscroll();

调用此函数。

返回 TopScrollToTop（0）; 滚动到底部 scrolltotop（documentdocumentelement.scrollheight - window.innerheight);

ios 13.3 Safari 支持 iOS 114.1 Safari支持Galaxy S9 Android 90 内置浏览器支持 Chrome 79 支持。

有几种方案可以平滑滚动到顶部或底部

相似文章