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

Detailed explanation of data types and schema optimization in MySQL

I'm currently learning about MySQL optimizati...

Detailed explanation of CSS multiple three-column adaptive layout implementation

Preface In order to follow the conventional WEB l...

About debugging CSS cross-browser style bugs

The first thing to do is to pick a good browser. ...

How to create https using nginx and Tencent Cloud free certificate

I have been studying how to get https. Recently I...

JavaScript to achieve dynamic table effect

This article shares the specific code for JavaScr...

In-depth understanding of mathematical expressions in CSS calc()

The mathematical expression calc() is a function ...

Case analysis of several MySQL update operations

Table of contents Case Study Update account balan...

A brief discussion on the role of Vue3 defineComponent

Table of contents defineComponent overload functi...

A brief introduction to Tomcat's overall structure

Tomcat is widely known as a web container. It has...

Why are the pictures on mobile web apps not clear and very blurry?

Why? The simplest way to put it is that pixels are...

The use of FrameLayout in six layouts

Preface In the last issue, we explained LinearLay...

How to install and configure ftp server in CentOS8.0

After the release of CentOS8.0-1905, we tried to ...

Sample code for implementing Alipay sandbox payment with Vue+SpringBoot

First, download a series of things from the Alipa...

How to use explain to query SQL execution plan in MySql

The explain command is the primary way to see how...