首页 > 其他分享 >平滑滚动到对应的锚点

平滑滚动到对应的锚点

时间:2023-03-09 17:48:06浏览次数:34  
标签:index 滚动 平滑 scrollBox let 锚点 id

toAnchor(index) {
      let scrollBox = document.getElementById("list-video"); // 在某元素区域内滚动,一般是设置了overflow:'scroll'的元素
      // let scrollBox = window // 如果是整页滚动,则使用此行
      let anchorElement = document.getElementById("scroll" + index); // 需要定位看到的锚点元素,设置了id的,如id="anchor-1",id="anchor-2"
        // console.log(index,9999999999)
      if (scrollBox) {
        scrollBox.scrollTo({
          left: 0,
          top: anchorElement.offsetTop, // 可以根据滚动情况增减数值
          behavior: "smooth",
        });
      }
    },

  

标签:index,滚动,平滑,scrollBox,let,锚点,id
From: https://www.cnblogs.com/wcq520/p/17199336.html

相关文章

  • 滚动到指定位置(requestAnimationFrame)
    1.运动的效果1//Tween运动算法2Mover.prototype.Tween={3/*44个參数5t:currenttime(当前时间)6b:beginningvalue(初始值......
  • scrollTo与scrollBy滚动 动画效果
    1.scrollTo(x,y)//指定滚动到x轴和y轴的位置2.scrollTo(options)//options有三个参数,(left,top,behavior),top等同于y-coordleft等同于x-coordbehavior类型Strin......
  • iview table 左侧固定列 右侧固定列 滚动的时候 表格错位 解决方案
    iviewtable左侧固定列右侧固定列滚动的时候表格错位解决方案iviewtable滚动条位置重置https://www.jianshu.com/p/32fcd50489ff......
  • DBGrid鼠标滚动控制
    typeprocedureOnMouseWheel(VarMsg:TMsg;varHandled:Boolean);//注意,需先在type里声明////////////////////////////////////////////////////////////////////////......
  • JS原生---歌词滚动效果案例
    【开门见山】实现目标:需要让歌词列表随着播放的时间更新而滚动,即实时的跟随歌曲的进度而滚动效果:​编辑 需要事先准备的东西:1.音频(mp3格式):​编辑 2.歌词(详细):​......
  • JS dom元素滚动到顶部
    设置dom元素的scrollTop属性为0直接设(可能存在闪动,看需求):document.querySelector('.xxx').scrollTop=0动画平滑滚动:toTop(){lettimer=nulltimer=r......
  • vue样式穿透 滚动条隐藏 原生样式修改
    样式穿透:deep,否则可能不能覆盖原有样式,vue2使用/v-deep/或者::v-deep,或者取消scoped,但不推荐,因为会影响到其他页面样式<stylelang="scss"scoped>/deep/ .el-table__b......
  • css隐藏滚动条
    css如何隐藏div区域的超出滚动条,但仍保持滚动功能呢?这里给出我的方法:这里是div滚动区域html代码,scroll-box是产出自动滚动区域,如下:<divclass="scroll-box"><div......
  • 记录--虚拟滚动探索与封装
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助1.介绍什么是虚拟滚动?虚拟滚动就是通过js控制大列表中的dom创建与销毁,只创建可视区域dom,非可视区域的d......
  • Linux如何查看实时滚动日志
    Linux有多种方法可以查看实时滚动日志。最常用的方法是使用tail命令,它可以显示一个文件的最后几行,并且可以跟踪文件的变化。例如,你可以输入tail-f/var/log/syslog来查看......