Take the "Back to Top" function at the bottom of the page as an example. The idea of scrolling animation is to obtain the current position of the scroll bar when the button is clicked, call the timer function, and decrement the position of the scroll bar at each time interval until it is decremented. When it is as small as 0, clear the timer and return to the top of the page.
When the scroll bar does not leave a screen height of the home page, the "back to top" button should be set to invisible, and the current position of the scroll bar can be monitored. When it is less than a screen height, set the property of the button to be greater than a screen
v-showheightfalse. , set totrue.
code example
<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>
Get the current position of the scroll bar
document.documentElement.scrollTop || document.body.scrollTop
get the height of the screen
window.innerHeight
After understanding this principle, the implementation of the top navigation bar is very simple. If you don't want to write scrolling animation, you can directly jump very conveniently by filling in the element of the target jump position in the attribute
<a>of the label .hrefid
The navigation bar is as shown in
the code sample
<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>
Insert a digression, how to elegantly modify
<a>the default style of the label
is mainly to set the css attributes of a:link a:visited a:hover a:active
Before modification
After modification
Attach code
a {
// 清除默认下划线
text-decoration: none;
}
// 超链接初始样式
a:link {
color: #8e9eab;
}
// 超链接被访问后的样式
a:visited {
color: #8e9eab;
}
// 鼠标悬停时的样式
a:hover {
color: #4f4f4f;
}
// 点击超链接时的样式
a:active {
color: #8e9eab;
}
ps:
a:hover must be after a:link and a:visited
a:active must be after a:hover