vue 实现返回顶部功能-指定盒子滚动区域

html代码
css代码
返回顶部
显示/隐藏返回标志

html代码

  <a-icontype="vertical-align-top"class="top"name="back-top"@click="backTop"v-if="btnFlag"/>

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;
}

返回顶部

    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);}});},

显示/隐藏返回标志

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;}},