vue中点击按钮滑动到页面顶部怎么写

你好，关于你的问题，可以使用以下代码实现：

// 获取页面的scrollTop
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
// 页面滚动动画
function scrollToTop(scrollDuration) {
  const scrollStep = -scrollTop / (scrollDuration / 15);
  const scrollInterval = setInterval(function(){
    if (scrollTop != 0) {
      window.scrollBy(0, scrollStep);
      scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    }
    else clearInterval(scrollInterval); 
  },15);
}
// 监听按钮点击事件
document.getElementById("button").addEventListener("click", function(){
  scrollToTop(500); // 500为滚动动画的执行时间，单位毫秒
});

希望能解决你的问题。如果你有其他问题，可以继续询问。

相关问题

前端vue3项目 当向下滑动的时候 如何实现点击按钮回到顶部的功能

在Vue3项目中，如果你想要实现在页面滑到底部时通过点击按钮返回到页面顶部，你可以利用JavaScript事件监听和滚动事件（如`window.onscroll`或`scroll`事件）。以下是一个基本的示例：

首先，在HTML中添加一个用于触发回顶操作的按钮：

<button @click="goToTop">回到顶部</button>

然后，在你的Vue组件的script部分中定义`goToTop`方法：

export default {
  methods: {
    goToTop() {
      const el = document.documentElement;
      if (el.scrollTop > 0 || window.pageYOffset > 0) { // 滑动到底部判断条件
        window.scrollTo({
          top: 0, // 将滚动条移动到顶部
          behavior: 'smooth', // 可选，设置平滑滚动效果
        });
      }
    },
  },
};

在这个例子中，当用户点击“回到顶部”按钮时，会检查滚动位置是否大于0，如果大于0则滚动到页面顶部。`behavior: 'smooth'`可以提供一个平滑的滚动体验。

vue3可拖动返回按钮

在Vue3中实现可拖动返回按钮的方法可以使用el-affix组件和相关的样式设置。首先，你需要导入el-affix组件并在模板中使用它。设置el-affix的position属性为"top"，并添加一个class名为"mainaffix"，然后在style标签中为该class添加样式，设置其position为absolute，left为20px，top为20px，这样按钮就会紧贴在页面顶部并且脱离文档流，不会干扰其他元素的渲染。接下来，在el-button组件中，你可以使用动态绑定的方式来设置disabled属性，将其绑定到一个计算属性currentPath上。计算属性currentPath可以通过computed函数来创建，其中的计算方法可以根据你的需求来判断是否应该禁用按钮。最后，在点击按钮时，你可以使用router.push方法来返回到主页的路由。以下是一个示例代码：

<template>
  <el-affix position="top" class="mainaffix">
    <el-button :icon="House" type="primary" :disabled="currentPath" @click="backToIndex"></el-button>
  </el-affix>
  ...
</template>

<script setup>
import { useRouter } from "vue-router";
import { House } from "@element-plus/icons-vue";
import { computed } from "vue";

// 获取路由实例
const router = useRouter();

// 计算属性返回指定布尔值，判断是否应该禁用按钮
const currentPath = computed(() => {
  // 取出当前路由相对值的方法
  return router.currentRoute.value.path === "/";
});

// 返回主页的路由方法
const backToIndex = () => {
  router.push({ path: "/" });
};
</script>

<style lang="less" scoped>
.mainaffix {
  position: absolute;
  left: 20px;
  top: 20px;
}
</style>

请注意，上述代码中的el-affix和el-button组件是基于Element Plus库的，你需要确保已经正确导入和安装了Element Plus库。另外，你可能需要根据自己的项目需求进行适当的调整和修改。
#### 引用[.reference_title]
- *1* *2* [Vue3悬浮返回主页按钮设计与实现](https://blog.csdn.net/delete_you/article/details/128728676)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue移动端实现悬浮可拖动且滑动页面时收缩至内侧按钮](https://blog.csdn.net/weixin_45472408/article/details/116264071)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]