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

Example of asynchronous file upload in html

Copy code The code is as follows: <form action...

Some tips on website design

In fact, we have been hearing a lot about web des...

Implementation of mounting NFS shared directory in Docker container

Previously, https://www.jb51.net/article/205922.h...

Summary of the Differences between SQL and NoSQL

Main differences: 1. Type SQL databases are prima...

9 super practical CSS tips to help designers and developers

A web designer's head must be filled with a lo...

Detailed explanation of the text-fill-color property in CSS3

What does text-fill-color mean? Just from the lit...

How to change the character set encoding to UTF8 in MySQL 5.5/5.6 under Linux

1. Log in to MySQL and use SHOW VARIABLES LIKE &#...

JavaScript data visualization: ECharts map making

Table of contents Overview Precautions 1. Usage 2...

Detailed analysis of MySQL instance crash cases

[Problem description] Our production environment ...

Solution to elementui's el-popover style modification not taking effect

When using element-ui, there is a commonly used c...

MySQL 8.0 WITH query details

Table of contents Learning about WITH queries in ...

Example of adding and deleting range partitions in MySQL 5.5

introduce RANGE partitioning is based on a given ...

Introducing the code checking tool stylelint to share practical experience

Table of contents Preface text 1. Install styleli...

HTML tag meta summary, HTML5 head meta attribute summary

Preface meta is an auxiliary tag in the head area...