const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { const duration = 600; const startTime = Date.now(); // 图片页面不适合动画滚动 //todo 看不懂 if (route.path != "/photos") { return new Promise((res) => { const fnc = () => { const timestamp = Date.now(); const time = timestamp - startTime; console.log(time) const nextScrollTop = easeInOut(Math.min(time, duration), c, 0, duration); window.scrollTo(0, nextScrollTop); if (time < duration) { window.requestAnimationFrame(fnc); // 动画函数 } else { // 由于上面步骤设置了scrollTop, 滚动事件可能未触发完毕 // 此时应该在下一帧再执行res window.requestAnimationFrame(res); } }; window.requestAnimationFrame(fnc); }); } else { //图片页面的滚动，直接回到顶部 const fnc = () => { window.scrollTo(0, 0); }; window.requestAnimationFrame(fnc); } } }; //二次缓动函数 //curtime 当前时间,，begin 开始的位置,，end 结束的位置,，duration 动画经过的总时长 const easeInOut = (curtime, begin, end, duration) => { const change = (end - begin) / 2; // y轴高度一半 let time = curtime / (duration / 2); //时间位置,x轴位置 if (time < 1) { //前半段时间 return change * time * time * time + begin; } time -= 2; return change * (time * time * time + 2) + begin; };

这是一段实现页面滚动到顶部的代码，其中包含了一个二次缓动函数。

首先，代码通过获取当前页面的scrollTop值来判断页面是否需要滚动到顶部。如果scrollTop值大于0，则需要滚动到顶部。

在滚动时，会根据设置的动画时长和开始时间计算出当前时间，然后调用二次缓动函数来计算出当前的滚动位置。

二次缓动函数的作用是让页面滚动速度逐渐变慢，滚动距离逐渐减小，从而实现一个更加平滑的滚动效果。

最后，代码通过使用requestAnimationFrame函数来实现动画效果，确保页面滚动的流畅性和性能。

需要注意的是，代码中有一个判断当前页面路径是否为"/photos"的部分，如果是图片页面则直接回到顶部，不进行动画滚动。

相关问题

const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollTop);以上代码在获取页面滚动高度，打印不出来数据，为什么

如果您的代码在获取页面滚动高度时，使用了 `const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;`，但在控制台中无法输出数据，有可能是因为您没有在正确的时机调用该代码。请确保您的代码在页面完成加载后再执行，例如在 `window.onload` 或 `mounted` 钩子函数中调用。

另外，如果您的页面内容较少，页面高度不足以出现滚动条，那么使用上述代码获取页面滚动高度时，输出的值应该是 0。请尝试在页面滚动后再次执行代码，查看是否能够正确输出页面滚动高度。

我这里捕获时机错误，如何修改？ activated () { console.log('mot main index activated!!!!!!') const scrollCache = window.sessionStorage.getItem('MOT_MOT_BACK_SCROLLTOP') if (scrollCache) { this.$nextTick(() => { const height = document.getElementById('app').scrollHeight console.log('height =====>', height) // console.log('client', document.getElementById('app').clientWidth) // console.log('document.getElementById("app").scrollHeight', document.getElementById('app').scrollHeight) // console.log('MOT_SINGLE_SCROLLTOP', window.sessionStorage.getItem('MOT_SINGLE_SCROLLTOP')) console.log('scrollCache =====>', scrollCache) const scrollTop = scrollCache / 1000000 * height console.log('scrollTop =====>', scrollTop) document.getElementById('app').scrollTop = Number(scrollTop) console.log('scrollTop.now =====>', document.getElementById('app').scrollTop) }) } }, beforeRouteLeave(to, from, next) { const cache = document.getElementById('app').scrollTop const height = document.getElementById('app').scrollHeight const light = cache / height * 1000000 console.log('cache =====>', cache) window.sessionStorage.setItem('MOT_MOT_BACK_SCROLLTOP', light) next() },

根据您提供的代码，您的问题可能是在捕获滚动位置的时机上。根据您的代码，您是在组件的activated钩子函数中捕获滚动位置，但是activated钩子函数只有在组件首次渲染和缓存重新激活时才会被调用，因此在其他情况下，如组件已缓存但是用户切换了路由，activated钩子函数将不会被调用，这可能会导致您的滚动位置无法正确保存和恢复。为了解决这个问题，您可以考虑使用Vue Router提供的导航守卫来捕获滚动位置，确保无论何时用户切换路由，都可以正确保存和恢复滚动位置。以下是一个示例代码：

// 在Vue Router中注册导航守卫
const router = new VueRouter({
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    // 保存滚动位置
    if (savedPosition) {
      window.sessionStorage.setItem('MOT_MOT_BACK_SCROLLTOP', savedPosition.y)
    } else {
      window.sessionStorage.setItem('MOT_MOT_BACK_SCROLLTOP', document.documentElement.scrollTop || document.body.scrollTop)
    }
    // 返回滚动位置
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: Number(window.sessionStorage.getItem('MOT_MOT_BACK_SCROLLTOP') || 0) }
    }
  }
})

// 在组件中可以不再需要使用activated钩子函数
// 但是需要确保在组件中使用了Vue Router提供的<router-view>组件

在以上示例代码中，我们使用了Vue Router提供的scrollBehavior函数来保存和返回滚动位置。scrollBehavior函数在用户切换路由时会被自动调用，如果从缓存中恢复组件，则会将缓存中保存的滚动位置作为返回值，这样就可以确保在任何情况下都可以正确保存和恢复滚动位置。