<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
Copy code The code is as follows: <form action...
In fact, we have been hearing a lot about web des...
Previously, https://www.jb51.net/article/205922.h...
Table of contents What is an index The difference...
Main differences: 1. Type SQL databases are prima...
A web designer's head must be filled with a lo...
What does text-fill-color mean? Just from the lit...
1. Log in to MySQL and use SHOW VARIABLES LIKE ...
Table of contents Overview Precautions 1. Usage 2...
[Problem description] Our production environment ...
When using element-ui, there is a commonly used c...
Table of contents Learning about WITH queries in ...
introduce RANGE partitioning is based on a given ...
Table of contents Preface text 1. Install styleli...
Preface meta is an auxiliary tag in the head area...