Vue achieves the top effect through v-show

Vue achieves the top effect through v-show

html

    <div class="totop" v-show="toTopShow" @click="toTop()">top</div>

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,
}
},

Listening for events

  watch:
    srcoll() {
      if (this.srcoll > 400) {
        this.toTopShow = true;
      } else {
        this.toTopShow = false;
      }
    },
  },

Loading Event

 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;
//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:
  • Detailed explanation of Vue's scroll event listener back to the top
  • Vue.js implements the animation effect of returning to the top
  • Vue implements the animation effect of returning to the top and bottom
  • An example of returning to the top after vue router jumps

<<:  HTML left, center, right adaptive layout (using calc css expression)

>>:  MySQL practical window function SQL analysis class students' test scores and living expenses

Recommend

JavaScript Factory Pattern Explained

Table of contents Simple Factory Factory Method S...

Thumbnail hover effect implemented with CSS3

Achieve resultsImplementation Code html <heade...

Window.name solves the problem of cross-domain data transmission

<br />Original text: http://research.microso...

An Incomplete Guide to JavaScript Toolchain

Table of contents Overview Static type checking C...

Detailed steps to upgrade mysql8.0.11 to mysql8.0.17 under win2008

Upgrade background: In order to solve the vulnera...

A collection of common uses of HTML meta tags

What is a mata tag The <meta> element provi...

Simple example of limit parameter of mysql paging

Two parameters of Mysql paging select * from user...

MySQL query example explanation through instantiated object parameters

This article will introduce how to query data in ...

JavaScript to implement a simple web calculator

background Since I was assigned to a new project ...

MySQL performance optimization: how to use indexes efficiently and correctly

Practice is the only way to test the truth. This ...

mysql5.7 create user authorization delete user revoke authorization

1. Create a user: Order: CREATE USER 'usernam...

Java example code to generate random characters

Sample code: import java.util.Random; import java...