精华内容
下载资源
问答
  • VUE滚动条顶部
    2021-12-28 15:43:01

    今天遇到一个滚动条需要初始化到顶部,百度了几个文章,最喜这种方法,记录

    //  warp 指div的ref 名字
    this.$refs.wrap.scrollTo(0, 0)
    
    
    //假如在挂载之前要用这个的话 请用如下
       this.$nextTick(() => {
                   this.$refs.wrap.scrollTo(0, 0);
       });

    更多相关内容
  • vue 滚动条回到顶部

    2022-01-18 10:20:15
    在main.js里写入 // 跳转后返回顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); })

    在main.js里写入

    // 跳转后返回顶部
    router.afterEach((to,from,next) => {
      window.scrollTo(0,0);
    })
    
    展开全文
  • 主要介绍了vue项目中在使用vue-router切换页面的时候滚动条自动滚动到顶部的实现方法,一般使用Window scrollTo() 方法实现,本文给大家简单介绍了crollTop的使用,需要的朋友可以参考下
  • Vue 返回滚动条顶部

    2020-08-28 11:05:07
    // 当页面加载完成,我们给window对象(所有浏览器都支持window对象,表示浏览器窗口)给他添加监听滚动事件 mounted () { window.addEventListener('scroll', this.scrollToTop) }, // 当页面销毁的时候,我们...

    最近在帮朋友做一个官网,本来想写一个固定的头部导航,但是经过设计,发现不是很美观,最后就加了一个按钮,可以返回顶部,继续跳转到我想要去的页面。

          // 当页面加载完成,我们给window对象(所有浏览器都支持window对象,表示浏览器窗口)给他添加监听滚动事件
          mounted () {
            window.addEventListener('scroll', this.scrollToTop)
          },
          // 当页面销毁的时候,我们移除滚动事件
          destroyed () {
            window.removeEventListener('scroll', this.scrollToTop)
          },
          methods: {
            // 点击返回图标或者按钮 返回顶部
            backTop () {
              const that = this
              // 添加一个定时器,这样页面返回顶部的时候,显得不会那么的生硬,会有点过渡
              let timer = setInterval(() => {
                let ispeed = Math.floor(-that.scrollTop / 6)
                document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
                // 当回到顶部后,清除定时器
                if (that.scrollTop === 0) {
                  clearInterval(timer)
                }
              }, 18)
            },
    
            // 计算距离顶部的高度,当高度大于80显示回顶部图标,小于80则隐藏
            scrollToTop () {
              const that = this
              // 在滚动事件的过程中,获取到当前的滚动条距离顶部的高度
              let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
              that.scrollTop = scrollTop
              if (that.scrollTop > 80) {
                that.topFlag = true
              } else {
                that.topFlag = false
              }
            }
          }
    
    展开全文
  • vue实现滚动条返回顶部功能

    千次阅读 2019-10-09 15:19:03
    methods:{ //返回顶部 backTop () { let timer = setInterval(function () { var top = document.body.scrollTop || document.documentElement.scrollTop; var speed = top /...

     

    methods:{
        //返回顶部
          backTop () {
            let timer = setInterval(function () {
              var top = document.body.scrollTop || document.documentElement.scrollTop;
              var speed = top / 4;
              if (document.body.scrollTop!=0) {
                document.body.scrollTop -= speed;
              }else {
                document.documentElement.scrollTop -= speed;
              }
              if (top == 0) {
                clearInterval(timer);
              }
            },30);
          },
          // 为了计算距离顶部的高度,当高度大于60显示回顶部图标,小于60则隐藏
          scrollToTop () {
            const that = this
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            that.scrollTop = scrollTop;
            //判断滚动超出一定距离后在让返回顶部按钮出现
            // if (that.scrollTop > 300) {
            //   that.backFlag = true
            // }else {
            //   that.backFlag = false
            // }
          }
    },
    mounted () {
          let that = this;
          window.addEventListener('scroll', that.scrollToTop);
    },
    destroyed (){
          let that = this;
          window.removeEventListener('scroll', that.scrollToTop);
    },

    资源参考链接:https://www.cnblogs.com/li-you/p/7275239.html

    展开全文
  • vue 切换页面(路由)时保持滚动条回到顶部 vue项目做pc端的时候,发现在两个页面切换时 滚动条没有回到顶部而是保持原先的位置; 这是由于vue是单页面应用,只是更换了路由内容,还在当前页面滚动条是不会回到顶部...
  • 在template标签下,定义一个div标签:<...定义div的样式,撑起滚动条: .className { height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; } 现在已经有...
  • vue 滚动条顶部或者到指定位置

    万次阅读 2018-12-26 17:52:30
    首先在 html 里面给你要滚动的元素设置属性 ref='box' 这就相当于是DOM操作了 , 然后 根据 属性名找到则个元素就可以操作啦,嘻嘻
  • vue回到顶部

    千次阅读 2020-12-21 08:13:03
    1. 回到顶部,使用 scrollIntoView 方法:Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域该方法可以接受一个布尔值作为参数。如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前...
  • 问题:单页面跳转如:A页面滚动条滚动后再跳转B页面,在B页面滚动条还是在A页面滚动时的位置 解决办法(针对单个页面这个问题的) // 在/b页面, vue的mounted方法中, 写设置页面滚动条的这个方法 mounted() { // ...
  • 今天记录的是如何在路由切换的时候,滚动条回到顶部。分析首先简单分析下,为什么路由切换会导致滚动条不会自动到顶部。多页应用每次点击菜单导航都会重新刷新整个页面,自然有滚动条时,也会回到顶部。而单页应用...
  • 点击回到顶部后 滚回顶部 不可以一下子转到顶部 实现效果: 代码实现: html: <li :class="backTopFlag ? 'active' : 'inactive'" @click="backTop"> <i class="icon5"></i> <...
  • vue局部div滚动点击回到顶部 针对局部div的内容滚动使用点击回到顶部的需求: 第一步 定义一个超过界面高度的div内容区。并设置id 第二步 点击回到顶部的按钮 // An highlighted block <template> <div&...
  • 在 app.vue 下 监听 $route 发生变化就让滚动条回到顶部 ; export default { name: 'App', watch:{ $route() { // 回到顶部 window.scrollTo(0, 0); } } }
  • 通过在app.vue中定义一个张图,这样在我们的每一个页面中都会有回到顶部的效果。 在data中声明默认滚动条的高为0.以及滚动条是否显示两个数据。写一个方法监听滚动条的高度 当高度高于一个值(自定义的值),就显示...
  • vue监听滚动条事件 vue监听滚动条为120时触发事件: mounted () { this.handleScroll = _debounce(() => { let top = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window...
  • 开发首页出现滚动条回到顶部的需求,也不能直接回到,要缓慢回滚。 旧项目使用的是JQuery的 $("html,body").animate({scrollTop:0},500); //动画化滚动到顶部。varscrolltop=$(this).scrollTop();//位置 新项目...
  • 开始也是在网上百度一大堆类似答案,...首先在app.vue <template> <div id="app" ref="app"> <router-view/> </div> </template> 加一个ref='app'然后在监听 watch: { $r...
  • vue实现返回顶部组件

    2021-01-30 13:31:38
    当页面滚动超过一屏时,显示回到顶部按钮,点击回到顶部src/components/scroll/index.vueimport { Swiper,SwiperSlide } from'vue-awesome-swiper';import'swiper/css/swiper.css';import MeLoading from'components...
  • 主要介绍了vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • position: fixed; right: 50px; bottom: 30px; cursor: pointer;... } } } 直接回到顶部 // 滚动到app所在的位置(无滚动效果),如app在顶部,即回到顶部 document.getElementById("app").scrollIntoView();
  • 1. 滚动条样式 详细讲解 /*css主要部分的样式*/ /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 8px; /*对垂直流动条有效*/ height: 8px; /*对水平流动条有效*/ } /*定义...
  • //监听滚动 document.onscroll=() => { if(document.documentElement.scrollTop > 500){ this.flag_scroll = true ... //回到顶部 backTop() { document.documentElement.scrollTo(0,0) },
  • vue 跳转页面后回到滚动条顶部

    千次阅读 2019-08-16 17:33:04
    在路由router.js中加上: scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } }, 之前跳转一直没用,最后...因为页面是超出100%的,所以我改成了min-height: 100%,跳转后滚动条回到顶部了 ...
  • vue点击按钮滚动顶部 电梯 (vue-elevator) A wrapper of elevator.js in Vue. Vue中的lift.js的包装。 View demo 查看演示 Download Source 下载源 安装 (Installation) npm i -D vue-elevator 用法 ...
  • 监听滚共触发的事件: listenerFunction(e) { document.addEventListener("scroll", this.handleScroll, true); }, beforeDestroy() { document.removeEventListener("scroll", this.listenerFunction); }, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,472
精华内容 988
关键字:

vue 滚动条回到顶部

友情链接: 327A1.zip