vue 点击滚动到顶部

已于 2024-01-02 14:31:36 修改
阅读量513 收藏 9
点赞数 8
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2023-12-21 17:38:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_63605379/article/details/135136586
版权 
    backTop() {
  
      const timer = setInterval(() => {
        const top = document.documentElement.scrollTop
        const speed = Math.ceil(top / 2)
        document.documentElement.scrollTop = top - speed
        if (top === 0) {
          clearInterval(timer)
        }
      }, 20)
    }

使用定时器每次高度都取一半并向上取整，这样就可以平滑的滚动顶部去

vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
主要介绍了vue项目中在使用vue-router切换页面的时候滚动条自动滚动到顶部的实现方法，一般使用Window scrollTo() 方法实现，本文给大家简单介绍了crollTop的使用,需要的朋友可以参考下
Vue项目中实现页面滚动到顶部功能
qq_52569656的博客
09-28 5143
本文基于Vue2+element-ui技术栈，通过scrollTo方法实现页面滚动到顶部功能
JavaScript基础——105. 实战内容：滚动条下滑显示和下滑隐藏【document.documentElement.scrollTop】
最新发布
weixin_63215361的博客
03-10 311
/给文档（document）中的body添加滚动事件。//文档元素（滚动条）离上方的距离。//滚动条距离顶部的距离。
Vue跳转页面默认滚动到顶部（全网最详细）
weixin_74095707的博客
12-30 2239
Vue跳转页面默认滚动到顶部（全网最详细）
vue 实现滚动到顶部
quequnlong的博客
09-26 860
在网站中滚动到顶部的功能是都需要的，不然你数据多，划到了最底下，你还得滚动鼠标划上去，要是我就当场吐血，所以各大网站就都会加一个滚动到顶部的按钮直接一键滚动。那么如何在网站中简单粗暴实现一个滚动到顶部的功能。请看代码data() {return {showBtn: false, // 回到顶部，默认是false，就是隐藏起来},toTop() {},上面的>200代表窗口超过body页面的200像素时显示回到顶部按钮// 四舍五入取整这里的代码可以实现显示滚动到页面的百分比数值。
Vue 指定元素滚动条滚到顶部
gdgztt的专栏
12-22 772
Vue 指定元素滚动条滚到顶部
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
10-15
总的来说，实现Vue Tab组件的滚动固定和内容切换涉及到组件设计、事件监听、数据绑定和CSS样式。通过这样的方式，我们可以创建一个灵活且交互性强的Tab组件，适应各种滚动和定位需求。在实际开发中，这可以极大地...
vue页面切换到滚动页面显示顶部的实例
11-28
当用户在ListView页面中滚动后点击进入详情页，由于详情页内容可能超过屏幕高度，导致页面初始滚动位置不是顶部，影响用户体验。 二、解决思路： 要解决这个问题，关键在于当从ListView页面跳转到详情页时，强制...
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
10-15
在Vue.js项目中，有时我们需要实现一个功能，即当用户点击按钮时，页面能够平滑地滚动到相应的位置。这个功能可以提升用户体验，特别是在长页面或者内容丰富的应用中。在提供的代码示例中，我们看到一种使用C3平滑...
Vue 回到顶部（滚动效果）
wangatong的博客
02-14 925
<div class="gotop" v-show="gotop" @click="toTop">Top</div> data() { return { gotop:false } } mounted() { window.addEventListener("scroll", this.handleScroll, true); }, handleScroll() { let scrolltop = document.do
vue中页面跳转滚动条置顶（总结）
个人博客 https://pnkx.top
03-17 5782
1.vue单个页面跳转时： 在此页面上mounted方法中设置滚动条的方法 mounted() { //&nbsp;切换页面时滚动条自动滚动到顶部 window.scrollTo(0,0); } 2.全部页面，使用路由的钩子函数中设置(在router中main.js) router.afterEach((to,from,next) => { window.scr...
vue移动端实现滚动到顶部
依古比古的博客
05-31 2320
<template> <div class="home"> <div @scroll="scroll()"> <div v-for="(item,index) in this.list" :key="index" class="every">{{item}}</div> </div> <div class="scrolltop" v-show="isShow" @click="goTop"&
vue 切换路由页面时，滚动条滚动到最上面
xingchen678的博客
01-18 4533
vue项目里，使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。可以在路由的导航守卫afterEach里面添加：window.scrollTo(0,0);scrollBehavior: () => ({ y: 0 }), //滚动到顶端。mode: ‘history 或 hash’,第三种方法： （本人用得方法）
Vue中滚动条回到顶部及动画化（缓慢回滚）
xinshishenchao的博客
04-08 3762
开发首页出现滚动条回到顶部的需求，也不能直接回到，要缓慢回滚。 旧项目使用的是JQuery的 $("html,body").animate({scrollTop:0},500); //动画化滚动到顶部。varscrolltop=$(this).scrollTop();//位置 新项目使用Vue开发，首先遇到的问题是网上查询的所有回到顶部方法均无效。找朋友远程帮忙检查了一下，原来是html...
VUE滚动条到顶部
Fiona_lms的博客
04-19 2842
// warp 指div的ref 名字 this.$refs.wrap.scrollTo(0, 0) //假如在挂载之前要用这个的话 请用如下 this.$nextTick(() => { this.$refs.wrap.scrollTo(0, 0); }); 然后我用了之后就直接报错了 [Vue warn]: Error in v-on handler: "TypeError: this.$refs.wrap.scrollTo is not a fun
vue点击按钮滚动到顶部_使用Vue.js滚动到页面顶部按钮
cuk5340的博客
07-28 2705
vue点击按钮滚动到顶部 Vue-go-top (vue-go-top) Scroll to page top button, Vue.js component. 滚动到页面顶部按钮Vue.js组件。 View demo 查看演示 Download Source 下载源 安装 (Install) 浏览器 (Browser) <script src="vue.js"></...
vue项目中scrollTop如何使用
MISS_zhang_0110的博客
06-16 4487
vue项目中scrollTop如何使用1. router.js路由配置2.enterpriseList.vue配置 需求：企业列表-----企业详情，当我再返回企业列表，还在第一次滑动的位置 1. router.js路由配置 { path: '/enterpriseList', name: 'enterpriseList', component: () => import('./company/enterpriseList.vue'), meta: {
Vue 某区域滚动至顶部 实现吸顶效果(固定定位) / 回到顶部
YaRuu的博客
03-26 3130
要求蓝色框内模块滑动到头部，左侧列表固定，右侧内容块继续滚动 实现 回到顶部功能 也是可以用window.addEventListener() 使用window方法 监听滚动事件：window.addEventListener() 参数1：事件类型（click、mousedown、scroll) 参数2：事件触发后调用函数 参数3：冒泡或捕获（布尔类型）
vue 页面滚动到顶部
12-04
在Vue.js中，当页面滚动到顶部时，通常会使用JavaScript的scroll事件或者Vue的自定义指令来实现这样的效果。以下是一个简单的示例： ```html <template> <button @click="scrollToTop">滚动到顶部</button> <div ref="scrollTarget">这是内容区域</div> </template> <script> export default { methods: { scrollToTop() { // 使用 Vue 的 ref 属性获取内容区元素 const scrollTarget = this.$refs.scrollTarget; // 当页面滚动到底部时，滚动到顶部 window.onscroll = function() { if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) { scrollTarget.scrollTop = 0; // 或者 scrollTarget.scrollTo({ top: 0 }) } }; }, }, } </script> ``` 在这个例子中，当点击按钮时，`scrollToTop`方法会被触发，它会在窗口滚动事件中检查是否已经滚动到底部。如果已滚动到底部，就会将内容区域滚动回顶部。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值