html代码
< a- icon
type= "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 ;
}
} ,