【内推字节】欢迎简历chengxinsong@bytedance.com

vue中如何实现返回到顶部这个功能,单个滚动条和多个滚动条如何实现返回顶部

一、前言

在页面布局中,滚动条。

可以使用全局的滚动条,这样不需要做任何设置,正常进行布局进行。

如果你使用局部的滚动条,通过设置父级元素的height:100%,overflow的值来控制。

本质:设置一个父级元素固定高度,子元素不固定,这样形成了高度差就会出现滚动条


二、返回顶部-jq篇

使用jq,实时检测window对象中scroll滚动方法,通过获取此时this对象的scrollTop()方法的获取滚动条离顶部的距离,根据距离来实现返回顶部的现实和影藏,点击事件通过jq的animation方法将scrollTop的值设置为0,

   $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').fadeOut();
        }
    });

    $("#back-top").on("click",function(){$("html,body").animate({scrollTop:"0"})})

可以参考这篇文章:https://www.mwcxs.top/page/175.html


三、返回顶部-vue篇

vue是数据化驱动的框架,所以不能直接用机jq,不然丧失了vue使用的初衷。

首先设置一个现实影藏的变量isShowToTop,默认值为false。

设置父级的dom元素变量$docElement,设置子元素的变量$body。

 <span class="to-top" @click="goToTop" v-show="isShowToTop"></span>


然后在mouted的钩子函数中,将$docElement和$body赋值,执行返回顶部函数,监听哪个部分的滚动条。

  mounted: function () {
    this.$docElement = document.documentElement;
    this.$body = document.body;
    this.pageToTop();
    window.addEventListener('scroll', this.debounce(this.pageToTop));
  },


最后在method钩子函数中:

初始化方法

    pageToTop: function () {
      let scrollTop = this.$body.scrollTop + this.$docElement.scrollTop;
      if (scrollTop > 200) {
        this.isShowToTop = true;
      } else {
        this.isShowToTop = false;
      }
      if (scrollTop === 0) {
        clearInterval(this.timer);
      }
    },

返回顶部点击的方法

   goToTop: function () {
      this.timer = setInterval(() => {
        let scrollTop = this.$body.scrollTop + this.$docElement.scrollTop;
        let speed = Math.floor(scrollTop / 6);
        this.$body.scrollTop = this.$docElement.scrollTop = scrollTop - (speed < 1 ? 1 : speed);
      }, 30);
    },

函数去抖的debounce方法

    debounce: function (fn, delay, timeout) {
      var timer = null;
      var last = new Date().getTime();
      delay = delay || 300;
      timeout = timeout || 300;
      return () => {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(fn, delay);
        if (new Date().getTime() > last + timeout) {
          fn.apply(this, [].slice.call(Array, arguments));
          last = new Date().getTime();
          clearTimeout(timer);
        }
      };
    }

上面的监听的是window的scroll。


如果我window上没有滚动条,我在其他地方有滚动条,我怎么修改呢?

欢迎访问:songEagle,一个自己的博客小站,地址:http://www.chengxinsong.cn



   mounted: function () {
      this.$docElement = document.getElementById('main-box')
      this.$body = document.getElementById('index-box');
      this.pageToTop();
      document.getElementById('main-box').addEventListener('scroll', this.debounce(this.pageToTop));
    },

其中main-box是父级的元素的dom对象,index-box为子级的元素的dom对象。其他地方不用改


文章转载:原创
感谢你的阅读,本文由 sau交流学习社区 版权所有。
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/516.html)
交流咨询
    官方QQ群
    群号663940201,欢迎加入!
    sau交流学习社区交流群

微信群
欢迎加入微信群
微信公众号
欢迎关注微信公众号

图文推荐

微信群
saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!
您正在使用的浏览器是,不在支持范围内!
为了您的正常使用与展示,推荐使用Chrome浏览器68以上版本
支持浏览器:
火狐浏览器最新版
Safari浏览器最新版
Edge浏览器最新版
IE浏览器10,11