vue 监听dom（vue 监听滚动条 页面滚动动画）

以页面底部的“回到顶部 
  
  
  
  
  
”功能为例            ，滚动动画的实现思路是
 
  
 
  
 
  
 
  
 
  
 
 ，当点击按钮时











，获取当前滚动条的位置  
  
  
  
  
  ，调用定时器函数 
  
  
  
  
  
 ，每个时间间隔对滚动条的位置递减


 


 


 


 


 


，直至减小到0 
 
 
 
 
 ，清除定时器  
   
   
   
   
   
 ，即可回到页面顶部 
  
  
  
  
  
。

当滚动条没有离开首页的一个屏幕高度时

 

 

 

 

 

，“回到顶部 
  
  
  
  
  
 ”按钮应设为不可见
 

 

 

 

 

 ，可以监听当前滚动条的位置            ，小于一个屏幕高度时
 

 
 

 
 

 
 

 
 

 
 

，将按钮的v-show属性设为false










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

代码示例

<template> <div id="index"> <div class="toTop" v-show="showTop" @click="toTop"> <img src="../assets/img/angle-square-up.png" alt="" width="35px" /> </div> </div> </template> <script> export default { 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> <style lang="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> <div id="navigation"> <ul class="part1"> <li>LOGO</li> </ul> <ul class="part2"> <!-- href="/" 跳转到首页 --> <li><a href="/">HOME</a></li> <!-- href="/#about" 跳转到首页的id为about的元素位置 --> <li><a href="/#about">ABOUT</a></li> <li><a href="/#paper">PAPER</a></li> <li><a href="/#team">TEAM</a></li> </ul> </div> </template> <style lang="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: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 之后