How to use Vue to implement return to top effects

How to use Vue to implement return to top effects

Introduction:
In modern web design, the return to top button is a common function, which provides users with Convenient operations that allow users to easily return to the top of the page. This article will introduce how to use the Vue framework to implement this function and provide specific code examples.

1. Create a Vue project:
First, we need to create a Vue project, which can be quickly created using the Vue CLI. Open the terminal and execute the following command:

vue create back-to-top
cd back-to-top

Then select the default configuration and wait for the project to be created.

2. Add the return to top button:
In the Vue project, we can place the return to top button in the App.vue component. Open the src/App.vue file and add the following code to the template:

<template>
  <div id="app">
    <!-- 页面内容 -->
    <router-view/>

    <!-- 返回顶部按钮 -->
    <button class="back-to-top" v-show="scrollPosition > 100" @click="backToTop">
      返回顶部
    </button>
  </div>
</template>

In the above code, we use a v-show directive to control the display and hiding of the return to top button. When the scroll position is greater than 100, the button is displayed; otherwise it is hidden. The value of the v-show directive is a Boolean type, and the scroll position is dynamically obtained by calculating the scrollPosition property.

3. Implement the return to top function:
Add a variable named scrollTop in data and initialize it to 0:

data() {
  return {
    scrollTop: 0,
  }
},

Then, we need to listen to the scroll event of the window , and update the value of scrollPosition. Add the following code in the mounted life cycle hook:

mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
methods: {
  handleScroll() {
    this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  },
},

In the above code, we use the window.pageYOffset property to get the current scroll position. In some old browsers, this attribute may not be supported, so we use two compatibility writing methods: document.documentElement.scrollTop and document.body.scrollTop.

Finally, we need to add a backToTop method to implement the function of scrolling to the top of the page. Add the following code in methods:

methods: {
  // 其他代码...

  backToTop() {
    const duration = 500 // 动画持续时间
    const startPos = this.scrollTop // 当前滚动位置
    const startTime = performance.now() // 开始时间

    const animateScroll = (timestamp) => {
      const elapsed = timestamp - startTime // 已经过去的时间
      const progress = Math.min(elapsed / duration, 1) // 完成百分比
      const easeProgress = 0.5 - 0.5 * Math.cos(progress * Math.PI) // 缓动效果的百分比

      window.scrollTo(0, startPos * (1 - easeProgress)) // 滚动到顶部

      if (progress < 1) {
        requestAnimationFrame(animateScroll)
      }
    }

    requestAnimationFrame(animateScroll)
  },
}

In the above code, we use the requestAnimationFrame method to achieve animation effects. By calculating different percentages, we implement a scroll-to-top animation with an easing effect.

4. Add styles:
Add some styles to the return to top button, open the src/App.vue file, and add the following code to the style:

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  background-color: #777;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.back-to-top:hover {
  opacity: 1;
}

In the above code, We added some basic styling to the button and added a gradient hover effect to it.

Summary:
Through the above steps, we successfully implemented the function of using the Vue framework to achieve the return to top effect. We created a Vue project, placed the return to top button in the App.vue component, and used Vue's instructions and calculated properties to control the display and hiding of the button. At the same time, we listened to the scroll event of the window and implemented the scroll to the top function through an animation effect. I hope this article will be helpful for you to learn the Vue framework and implement the return to top effect.

The above is the detailed content of How to use Vue to implement return to top effects. For more information, please follow other related articles on the PHP Chinese website!