<div class="totop" v-show="toTopShow" @click="toTop()">top</div>
.totop { width: 50px; height: 50px; line-height: 50px; border-radius: 25px; background-color: white; position: fixed; bottom: 75px; right: 10px; text-align: center; }
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: { srcollShow() { this.srcoll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; }, toTop() { this.toTopSpeed = setInterval(() => { document.documentElement.scrollTop = document.documentElement.scrollTop - 20; //Delayed scrolling animation by changing numbers if (this.srcoll < 10) { clearInterval(this.toTopSpeed); } }, 1); }, } The above operation is achieved by monitoring the scroll bar > 400, the top button appears, and click the top button to slowly return to the top, below 400 hide, img and so on This is the end of this article about how to use v-show to achieve the top effect in vue. For more relevant vue back to the top effect content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: HTML left, center, right adaptive layout (using calc css expression)
>>: MySQL practical window function SQL analysis class students' test scores and living expenses
I'm currently learning about MySQL optimizati...
Preface In order to follow the conventional WEB l...
The first thing to do is to pick a good browser. ...
I have been studying how to get https. Recently I...
This article shares the specific code for JavaScr...
Table of contents 1. Understand the basics 2. Con...
The mathematical expression calc() is a function ...
Table of contents Case Study Update account balan...
Table of contents defineComponent overload functi...
Tomcat is widely known as a web container. It has...
Why? The simplest way to put it is that pixels are...
Preface In the last issue, we explained LinearLay...
After the release of CentOS8.0-1905, we tried to ...
First, download a series of things from the Alipa...
The explain command is the primary way to see how...