vue页面中-返回到页面顶部（scrollIntoView详解）

vue回到页面顶部（scrollIntoView详解）

1、给顶部的div加一个id

<div id ="content">
    <div style = "width:100%;height:900px;position:relative">
        <button @click = "returnTop" style = "position:absolute;bottom:10px;left:0">返回顶部<button>
    </div>
</div>

2、某事件触发，回到顶部

methods:{
    returnTop(){
        content.scrollIntoView(),
    }
}

3、这样就直接返回到页面顶部了

注：

该scrollIntoView()方法，将调用它的元素滚动到浏览器窗口的可见区域

图例

，将调用它的元素滚动到浏览器窗口的可见区域

图例