vue 实现返回顶部功能-指定盒子滚动区域
html代码
javascript
复制代码
<a-icon
type="vertical-align-top"
class="top"
name="back-top"
@click="backTop"
v-if="btnFlag"
/>
css代码
css
复制代码
.top {
height: 35px;
width: 37px;
position: fixed;
right: 5%;
bottom: 5%;
text-align: center;
line-height: 45px;
font-size: 20px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0px 1px 3px 1px #888888;
z-index: 999;
}
返回顶部
javascript
复制代码
backTop() {
const timer = setInterval(() => {
let scrollTop = document.getElementsByClassName("wk-layout_body")[0].scrollTop;
let ispeed = Math.floor(-scrollTop / 5);
document.getElementsByClassName("wk-layout_body")[0].scrollTop = scrollTop + ispeed;
if (scrollTop === 0) {
clearInterval(timer);
}
});
},
显示/隐藏返回标志
javascript
复制代码
data() {
return {
btnFlag: false,
}
},
mounted() {
window.addEventListener("scroll", this.scrollToTop, true);
},
destroyed() {
window.removeEventListener("scroll", this.scrollToTop);
},
scrollToTop() {
let elVal = document.getElementsByClassName("wk-layout_body")[0];
let windowHeight = elVal.offsetHeight / 2;
const that = this;
that.scrollTop = elVal.scrollTop;
if (that.scrollTop > windowHeight) {
that.btnFlag = true;
} else {
that.btnFlag = false;
}
},