一、基础实现
首先,我们需要实现一个基础的回到顶部功能,不考虑按钮显示和逐步滑动效果。
// template
<template>
<div class="scroll-wrap" @scroll="scroll">
<div class="scroll-content">
<div class="content"> // 省略其他内容
// 点击回到顶部的按钮
<div class="back-to-top" @click="backToTop">Top</div>
</div>
</div>
</div>
</template>
// script
<script>
export default {
data() {
return {
scrollTop: 0,
};
},
mounted() {
this.$refs.scrollWrap.addEventListener('scroll', this.scroll);
},
methods: {
backToTop() {
this.$refs.scrollWrap.scrollTop = 0;
},
scroll() {
this.scrollTop = this.$refs.scrollWrap.scrollTop;
}
}
};
</script>
// style
<style>
.scroll-wrap {
height: 300px;
overflow-y: scroll;
}
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333333;
color: #ffffff;
font-size: 14px;
padding: 10px 20px;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s;
}
.back-to-top.show {
opacity: 1;
}
</style>
在这个实现中,我们在mounted中监听scroll事件,设置scrollTop的值,实现了一个基本的滚动效果。点击back-to-top按钮时,设置scrollTop为0,即可实现基本的回到顶部效果。
二、逐步回到顶部
为了让用户可以更加自然地回到顶部,我们可以添加逐步回到顶部效果。
// template(与上面相同)
// script
<script>
export default {
data() {
return {
scrollTop: 0,
};
},
mounted() {
this.$refs.scrollWrap.addEventListener('scroll', this.scroll);
},
methods: {
backToTop() {
let currentScrollTop = this.$refs.scrollWrap.scrollTop;
let step = currentScrollTop / 20; // 分为20步
let countDown = setInterval(() => {
if (this.$refs.scrollWrap.scrollTop <= 0) {
clearInterval(countDown);
} else {
this.$refs.scrollWrap.scrollTop -= step;
}
}, 10);
},
scroll() {
this.scrollTop = this.$refs.scrollWrap.scrollTop;
}
}
};
</script>
// style(与上面相同)
在这个实现中,我们添加了逐步回到顶部效果。通过分为20步,每一步设置scrollTop值减少1/20,实现了一个平滑逐步回到顶部的效果。
三、显示/隐藏按钮
为了让用户更加方便地使用回到顶部功能,我们可以在滚动高度超过一定值时,显示回到顶部按钮。
// template(与上面相同)
// script
<script>
export default {
data() {
return {
scrollTop: 0,
showButton: false,
};
},
mounted() {
this.$refs.scrollWrap.addEventListener('scroll', this.scroll);
},
methods: {
backToTop() {
let currentScrollTop = this.$refs.scrollWrap.scrollTop;
let step = currentScrollTop / 20; // 分为20步
let countDown = setInterval(() => {
if (this.$refs.scrollWrap.scrollTop <= 0) {
clearInterval(countDown);
} else {
this.$refs.scrollWrap.scrollTop -= step;
}
}, 10);
},
scroll() {
this.scrollTop = this.$refs.scrollWrap.scrollTop;
if (this.scrollTop > 100) {
this.showButton = true;
} else {
this.showButton = false;
}
}
}
};
</script>
// style
<style>
.scroll-wrap {
height: 300px;
overflow-y: scroll;
}
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333333;
color: #ffffff;
font-size: 14px;
padding: 10px 20px;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s;
}
.back-to-top.show {
opacity: 1;
}
</style>
在这个实现中,我们添加了一个showButton属性,当滚动高度超过100时,将showButton设为true,使得back-to-top按钮的class加上show类,从而显示出来。当滚动高度小于等于100时,将showButton设为false,使得back-to-top按钮的class去掉show类,从而隐藏起来。
四、动态判断按钮位置
为了让回到顶部按钮可以根据页面布局自动调整位置,我们需要实现动态判断按钮的位置。
// template
<template>
<div class="scroll-wrap" @scroll="scroll">
<div class="scroll-content">
<div class="content">
// 点击回到顶部的按钮
<div class="back-to-top" :class="{show: showButton}" @click="backToTop">Top</div>
</div>
</div>
<div class="sidebar">
// 省略其他内容
<div class="sidebar-back-to-top" :class="{show: showButton}" @click="backToTop">Top</div>
</div>
</div>
</template>
// script
<script>
export default {
data() {
return {
scrollTop: 0,
showButton: false,
sidebarTop: 0,
sidebarHeight: 0,
};
},
mounted() {
this.$refs.scrollWrap.addEventListener('scroll', this.scroll);
// 获取侧边栏的位置信息
this.sidebarTop = this.$refs.sidebar.offsetTop;
this.sidebarHeight = this.$refs.sidebar.offsetHeight;
},
methods: {
backToTop() {
let currentScrollTop = this.$refs.scrollWrap.scrollTop;
let step = currentScrollTop / 20; // 分为20步
let countDown = setInterval(() => {
if (this.$refs.scrollWrap.scrollTop <= 0) {
clearInterval(countDown);
} else {
this.$refs.scrollWrap.scrollTop -= step;
}
}, 10);
},
scroll() {
this.scrollTop = this.$refs.scrollWrap.scrollTop;
if (this.scrollTop > 100 && this.scrollTop + window.innerHeight < this.sidebarTop + this.sidebarHeight) {
this.showButton = true;
} else {
this.showButton = false;
}
}
}
};
</script>
// style
<style>
.scroll-wrap {
display: flex;
}
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333333;
color: #ffffff;
font-size: 14px;
padding: 10px 20px;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s;
}
.back-to-top.show {
opacity: 1;
}
/* 侧边栏样式 */
.sidebar {
width: 20%;
background-color: #f5f5f5;
position: fixed;
top: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
}
.sidebar-back-to-top {
background-color: #333333;
color: #ffffff;
font-size: 14px;
padding: 10px 20px;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s;
}
.sidebar-back-to-top.show {
opacity: 1;
}
</style>
在这个实现中,我们首先新增了一个sidebar侧边栏,将back-to-top按钮也添加到了侧边栏中,作为一个备选方案(如果页面布局看不到back-to-top按钮,用户可以通过侧边栏的back-to-top按钮进行操作)。然后,我们在mounted中获取侧边栏的位置信息(top和height),在scroll回调中,判断scrollTop+窗口高度是否小于sidebar的底部位置,从而确定back-to-top按钮是否可以显示。
五、总结
至此,我们对Vue回到顶部进行了详细的阐述。在实现过程中,我们需要注意以下几点:
1、基本实现:监听scroll事件,动态设置scrollTop的值,然后点击back-to-top按钮时将scrollTop设为0即可。
2、逐步回到顶部:分为20步,每一步设置scrollTop值减少1/20,实现平滑逐步回到顶部的效果。
3、显示/隐藏按钮:当scrollTop>100时,显示back-to-top按钮;否则,隐藏back-to-top按钮。
4、动态判断按钮位置:当scrollTop+窗口高度小于sidebar的底部位置时,显示back-to-top按钮,并将back-to-top按钮放置在侧边栏中,作为备选方案。
以上实现仅供参考,实际功能还需要根据具体业务情况进行调整。