效果

步驟

1-標簽結構

動態綁定樣式style，監聽點擊事件，后續控制opacity透明度。和滾動距離

<div class="toTop" :style="dynamicStyles" @click="toTop"><!--<i class="fa fa-arrow-up"></i>-->↑</div>

2-js代碼

實例及組件掛載后監聽

回調判斷滾動高度是否大于視口高度的1/2如果是，則設置動態樣式的opacity為1，不是則隱藏為0

點擊按鈕觸發置頂，scrollTo(0,0)滾動到 x y都為0的位置，也就是左上角

 data(){return{dynamicStyles:{opacity:0}}},mounted() {// 當所有組件都掛載好后，監聽窗口的滾動事件，觸發回調window.addEventListener('scroll',this.handleWindowScroll)},beforeUnmount() {window.removeEventListener('scroll', this.handleWindowScroll);},methods:{handleWindowScroll(){if (window.scrollY>document.documentElement.clientHeight/2){this.dynamicStyles.opacity=1}else{this.dynamicStyles.opacity=0}},toTop(){scrollTo(0,0)}}

3-css樣式

* {//滾動行為-流暢scroll-behavior: smooth;
}
.toTop{//透明度變化總時間，變化速度模式為緩動transition: 0.3s ease;position: fixed;bottom: 80px;right: 100px;display: block;background: #ffffff;width: 50px;height: 50px;text-align: center;line-height: 50px;border-radius: 100%;cursor: pointer;
}