Shulou(Shulou.com)06/01 Report--

本篇内容主要讲解"vue怎么实现回到顶部top效果"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"vue怎么实现回到顶部top效果"吧!

html

top

css

.totop {

width: 50px;

height: 50px;

line-height: 50px;

border-radius: 25px;

background-color: white;

position: fixed;

bottom: 75px;

right: 10px;

text-align: center;

}

data

data（） {

return {

toTopShow: false,

srcoll: 0,

}

},

监听事件

watch: {

srcoll（） {

if （this.srcoll > 400） {

this.toTopShow = true;

} else {

this.toTopShow = false;

}

},

},

加载事件

mounted（） {

window.addEventListener（"scroll", this.srcollShow）;

},

methods：

methods: {

srcollShow（） {

this.srcoll =

window.pageYOffset ||

document.documentElement.scrollTop ||

document.body.scrollTop;

},

toTop（） {

this.toTopSpeed = setInterval（（） => {

document.documentElement.scrollTop =

document.documentElement.scrollTop - 20;

//通过改变数字实现动画延迟滚动

if （this.srcoll

After 400, the top button appears, and click the top button, slowly back to the top, below 400 hidden, img and so on

At this point, I believe everyone has a deeper understanding of "how to achieve the top effect of vue back to the top," so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.