首先看一下效果 ,返回顶点效果:
这里其实就是封装了一个scroll.js
- 过渡用的是
requestAnimationFrame
,这货只支持IE10+,所以必须做兼容 - 滚动视图是
window.pageYOffset
,这货支持IE9+;
这里只是转载了他人写好封装完毕的代码,原文链接:https://blog.csdn.net/crper/article/details/76038932?utm_source=tuicool&utm_medium=referral
现在讲一下之前做的锚点平滑滚动:
首先我拿到这一块代码的时候,看了一下源码,发现好像不适合我的锚点
因为这代码的是拿取浏览器上滚动条距离顶端的距离,就是document对象,但是我这边完全用不了,我的只是父子级div滚动,但是看了代码之后,我可以将scroll.js提取出来,修改里面的源码,将其当做一个vue methods中的一个普通方法来做,优化之前一小段一小段的跳来实现假平滑移动的效果
情况和我之前的https://mp.csdn.net/postedit/80397826 这篇布局是一模一的,只是子组件页面(days-detail.vue)实现(代码和之前的一样,我这边简单放几个关键代码)
<el-steps
direction="vertical"
space="2.5rem"
finish-status="wait"
:active="activeStep">
<el-step
v-for="(item, index) in steps"
:key="index"
icon=" "
:title="item.title"
@click.native="jump(index)">
<dl-icon slot="icon" :type="index === 0 ? 'yinzhang' : 'shixinyuan'"
:color="index === 0 ? '#383636' : '#BEC0C2'" size="0.5"></dl-icon>
</el-step>
</el-steps>
// js