点击滚动到顶部可控制速度（2）， document.body.scrollTop + document.documentElement.scrollTop

前端小云儿

于 2023-12-19 17:25:46 发布

阅读量468

点赞数 4

分类专栏：前端静态页面以及逻辑文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/jieweiwujie/article/details/135090026

版权

前端静态页面以及逻辑专栏收录该内容

149 篇文章 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

本文介绍如何使用JavaScript实现点击按钮让页面平滑滚动到顶部，并且可以控制滚动速度。通过document.body.scrollTop和document.documentElement.scrollTop获取当前滚动位置，结合定时器实现平滑滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div id="app" ref="scrollTop0">
    <div>
      点击滚动到顶部可控制速度（2）， document.body.scrollTop +
      document.documentElement.scrollTop，
    </div>
    这是APP页面
    <div class="scrollBox" @click="ScrollTop(400, 100)">向下400米👇</div>
    <div v-for="item in 50" :key="item" style="height: 50px">
      页面内容{
  { item }}
    </div>
    <div class="scrollBox" @click="ScrollTop(0, 200)">返回顶部⬆️</div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},