以页面底部的“回到顶部”功能为例,滚动动画的实现思路是,当点击按钮时,获取当前滚动条的位置,调用定时器函数,每个时间间隔对滚动条的位置递减,直至减小到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>
标签的默认样式主要是设置 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 之后