vue 监听滚动条 页面滚动动画

以页面底部的“回到顶部”功能为例，滚动动画的实现思路是，当点击按钮时，获取当前滚动条的位置，调用定时器函数，每个时间间隔对滚动条的位置递减，直至减小到0，清除定时器，即可回到页面顶部。

当滚动条没有离开首页的一个屏幕高度时，“回到顶部”按钮应设为不可见，可以监听当前滚动条的位置，小于一个屏幕高度时，将按钮的

v-show

属性设为

false

，大于一个屏幕高度时，则设为

true

。

代码示例

<template><divid="index"><divclass="toTop"v-show="showTop"@click="toTop"><imgsrc="../assets/img/angle-square-up.png"alt=""width="35px"/></div></div></template><script>exportdefault{data(){return{showTop:false,};},mounted(){// 添加监听事件
    window.addEventListener("scroll",this.scrolling);},methods:{// 监听事件scrolling(){let current =
        document.documentElement.scrollTop || document.body.scrollTop;let vh = window.innerHeight;if(current >= vh){this.showTop =true;}else{this.showTop =false;}},// 点击事件toTop(){// 获取当前滚动条的位置let top = document.documentElement.scrollTop || document.body.scrollTop;// 滚动动画const timeTop =setInterval(()=>{
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=50;if(top <=0){clearInterval(timeTop);}},10);},},};</script><stylelang="scss"scoped>#index{.toTop{position: fixed;right: 20px;bottom: 20px;cursor: pointer;width: 35px;height: 35px;z-index: 2;opacity: 0.3;}}img:hover{opacity: 0.5;}</style>

获取滚动条当前位置
document.documentElement.scrollTop || document.body.scrollTop
获取屏幕高度
window.innerHeight

弄懂了这个原理之后，顶部导航条的实现就十分简单了，如果不想写滚动动画的话，在

<a>

标签的

href

属性中填入目标跳转位置的元素的

id

，就可以非常方便的直接跳转。

导航条如图

代码示例

<template><divid="navigation"><ulclass="part1"><li>LOGO</li></ul><ulclass="part2"><!-- href="/" 跳转到首页 --><li><ahref="/">HOME</a></li><!-- href="/#about" 跳转到首页的id为about的元素位置 --><li><ahref="/#about">ABOUT</a></li><li><ahref="/#paper">PAPER</a></li><li><ahref="/#team">TEAM</a></li></ul></div></template><stylelang="scss"scoped>#navigation{width: 94vw;height: 60px;margin: 0 auto;
  // 弹性布局
  display: flex;justify-content: space-between;align-items: center;.part2{
    // 弹性布局
    display: flex;justify-content: center;align-items: center;}li{width: 100px;height: 40px;line-height: 40px;font-weight: bold;a:link{color: #8e9eab;}a:visited{color: #8e9eab;}a:hover{color: #4f4f4f;}a:active{color: #4f4f4f;}}}</style>

插个题外话，如何优雅地修改

<a>

标签的默认样式
主要是设置 a:link a:visited a:hover a:active 这几个css属性

修改前

修改后

附上代码

a {
    // 清除默认下划线
    text-decoration: none;
}

// 超链接初始样式
a:link {
    color: #8e9eab;
}

// 超链接被访问后的样式
a:visited {
    color: #8e9eab;
}

// 鼠标悬停时的样式
a:hover {
    color: #4f4f4f;
}

// 点击超链接时的样式
a:active {
    color: #8e9eab;
}

ps：
a:hover 必须在 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后