开发首页出现滚动条回到顶部的需求,也不能直接回到,要缓慢回滚。

旧项目使用的是JQuery的 $("html,body").animate({scrollTop: 0}, 500); //动画化滚动到顶部。var scrolltop=$(this).scrollTop();//位置

新项目使用Vue开发,首先遇到的问题是网上查询的所有回到顶部方法均无效。找朋友远程帮忙检查了一下,原来是html,body,和element-UI 的main容器 .el-main设置了高度为100vh;这导致了最外层容器高度均为屏幕高度,此时子元素高度超出后,会在父级容器中滚动,实际上并不是整个页面在浏览器中滚动,导致了我在网上查找的回到顶部方法均无效(有一个例外)。在朋友的建议下改为min-height:100vh; height:auto;此时发现页面中的滚动条的确和原来不同了。之前无效的方法,也开始奏效。

下面总结一下,网上查询的滚动条回到顶部方法:

1:window.scrollTo(0,0); //浏览器滚动

2:document.documentElement.scrollTop; //浏览器滚动

3:  container.scrollIntoView(); //容器内滚动的例外生效方法;container为容器id。

即使我原来的容器内滚动可以用方法3来实现,但是后面的滚动条位置监控(滚动条在顶部是回到顶部按钮隐藏)依然无法实现。

所以,还是在1和2中选择,但是如何实现动画化呢(缓慢滚动到顶部)?网上查询得来思路是 使用setInterval来定时循环减少scrollTop的值。但这样1就不太好用了,所以还是选中了2,因为scrollTop可以被监控到,也可以被修改操控。

 mounted() { 

    window.addEventListener('scroll', this.handleScroll); //添加监听事件

  },

  destroyed() {

    window.removeEventListener('scroll', this.handleScroll); //移除监听事件

  },

handleScroll() { //监控scrollTop 的值,根据其变化执行相应操作(回到顶部按钮的显示和隐藏)

      if (document.documentElement.scrollTop >= 200) { 

        this.isTop = false;

      }else{

        this.isTop = true;

      }

    },

  goToTop(){ //回到顶部方法 点击按钮调用

      let top = document.documentElement.scrollTop;

      // 实现滚动效果 

      const timeTop = setInterval(() => {

        document.documentElement.scrollTop = top -= 50;  

        if (top <= 0) {

          clearInterval(timeTop); //清除定时器

        }

      }, 10);

    },

以上方法都是网上学习借鉴而来,我只是总结归纳一下。希望对各位有帮助,谢谢

Logo

前往低代码交流专区

更多推荐