使用scrollTo平滑滚动到顶部_明月松江的博客

项目有页面右下角有个返回按钮，点击则滚动到顶部。
我一开始考虑使用动画，后来一想如果使用动画，滚动时间就固定了，就会造成滚动忽快忽慢的情况。
所以有没有办法让页面平滑滚动到顶部呢？
答案是使用 window.scrollTo(options) 方法, options 是一个对象，有三个属性：
top 等同于 y-coord
left 等同于 x-coord
behavior 类型String,表示滚动行为,支持参数 smooth (平滑滚动), instant (瞬间滚动),默认值auto（等同于 instant ）
这里希望平滑滚动到顶部，故而使用 smooth 参数

window.scrollTo({
  top:0,
  behavior:'smooth'
参考网址：
 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollTo
                    项目有页面右下角有个返回按钮，点击则滚动到顶部。我一开始考虑使用动画，后来一想如果使用动画，滚动时间就固定了，就会造成滚动忽快忽慢的情况。所以有没有办法让页面平滑滚动到顶部呢？答案是使用window.scrollTo(options)方法,options是一个对象，有三个属性：top 等同于  y-coordleft 等同于  x-coordbehavior  类型String,表示滚...
				const scrollToTop = () => {
        const t = document.documentElement.scrollTop || document.body.scrollTop
        if (t > 0) {
          window.requestAnimationFrame(scrollToTop)
          window.scrollTo(0, t - t / 8)
      co...
				js自带的scrollTo方法可以设置动画，滚动的效果，代码在电脑上正常，但是在手机上的时候就没有smooth的滑动效果了，只能僵硬的跳到某个位置，类似scrollTop赋值的效果，这里从一个博客看到的一个解决办法，试了下确实可以，所以记录一下：
首先安装这个插件：smoothscroll-polyfill
npm install smoothscroll-polyfill --save
然后引入并在组件创建的时候调用下这个方法：比如mounted中
import smoothscroll fr
				scrollTo有两种语法：
1.scrollTo(x,y)   //指定滚动到x轴和y轴的位置
2.scrollTo(options)  //options有三个参数，（left,top,behavior ）,
top 等同于  y-coord
left 等同于  x-coord
behavior  类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),...
				在vue项目中，如果前一个页面有滚动条的滚动，当路由跳转后发现滚动条的位置还保持在原来的位置，这个就带来了困扰。
查询了资料，发现可以在路由的导航守卫afterEach里面添加：window.scrollTo(0,0);
这种方法可以在每次路由跳转后手动使滚动条回到头部位置。
其实在vue官网中介绍了scrollBehavior方法，同样可以实现路由跳转之后滚动条滚到顶部。
https:...
				一、元素偏移量 offset 系列属性
1、offset 概述
		offset系列属性可以动态的获得页面中某元素的偏移量，也就是元素位置，以及元素的宽度高度等属性。但是要注意，获得的元素的偏移量是元素相对于带有定位的父元素的位置，如果没有带定位的父元素，则是相对于页面的位置。而且获得的元素的宽度和高度是包括元素的border、padding的。最后所有属性的返回值都是数值型，不带单位。
2、offset系列属性
		总结： **offsetWidth=width+padding+border   
				如何让子元素滚动到指定父窗口的指定位置什么是滚动距离读取滚动距离如何设置滚动scrollTop属性scrollTo方法
什么是滚动距离
比如父元素设置了overflow: hidden;, 当元素里的内容超过元素本身的高度时, 就会出现滚动条, 那么鼠标滑动的距离就是其滚动距离.
读取滚动距离
    <title>test</title>
    <style>
            width: 200px;
				element.scrollTo首先需要注意的是调用scrollTo方法的是出现滚动的父元素，即高度固定overflo:scroll的那个元素。
1.滚动到的位置确定：
const parent = document.querySelector(`.parent`)
//scrollTo可以直接传入滚动的X,Y值，也可以传入一个对象
//直接传值
parent.scrollTo(0,100)
//传入对象的方式，这种方式可以控制滚动的速度
parent.scrollTo({
  top: 100 ,
				如果想在使用 `window.scrollTo` 方法时，解决页面滚动条先回到顶部再滚动到指定位置的问题，可以使用以下方法：
1. 使用 JavaScript 计算出当前页面滚动条的位置，然后计算出滚动的总距离，最后通过动画的方式实现滚动，从而避免回到顶部的现象。
2. 使用替代方案，例如：`scrollIntoView` 或 `scrollBy`。
// 获取当前滚动条位置
var currentScrollPosition = window.pageYOffset;
// 计算滚动总距离
var scrollDistance = targetPosition - currentScrollPosition;
// 指定动画时间
var scrollDuration = 1000;
// 计算每一帧的滚动距离
var scrollStep = scrollDistance / (scrollDuration / 16);
// 定义滚动动画
function scrollAnimation() {
    // 计算当前滚动条位置
    currentScrollPosition = window.pageYOffset;
    // 如果当前位置已经滚动到目标位置，停止动画
    if (currentScrollPosition >= targetPosition) {
        clearInterval(scrollInterval);
        return;
    // 滚动指定距离
    window.scrollBy(0, scrollStep);
// 开始滚动动画
var scrollInterval = setInterval(scrollAnimation, 16);