Vue<点击导航栏滑动到指定位置>

效果图:
assignBlock.gif
方法1:
<template>
  <div class="hold">
    <!-- 跳转到指定模块 -->
    <div class="btn-box">
      <button
        v-for="(i,index) in 5"
        @click="goAssignBlock('block'+ index,50)"
        :key="index"
      >GO-{{index}}</button>
    </div>
    <div class="block" ref="block0">0</div>
    <div class="block" ref="block1">1</div>
    <div class="block" ref="block2">2</div>
    <div class="block" ref="block3">3</div>
    <div class="block" ref="block4">4</div>
  </div>
</template>

<script>
export default {
  methods: {
    //el 标签  speed 滚动速率 此处是50px 值越大滚动的越快
    goAssignBlock(el, speed) {
      let _this = this;
      let windowH = window.innerHeight; //浏览器窗口高度
      let h = this.$refs[el].offsetHeight; //模块内容高度
      let t = this.$refs[el].offsetTop; //模块相对于内容顶部的距离
      let top = t - (windowH - h) / 2; //需要滚动到的位置,若改为 t 则滚动到模块顶部位置,此处是滚动到模块相对于窗口垂直居中的位置
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop; //滚动条距离顶部高度
      let currentTop = scrollTop; //默认滚动位置为当前滚动条位置,若改为0,则每次都会从顶部滚动到指定位置
      let requestId;
      //采用requestAnimationFrame,平滑动画
      function step() {
        //判断让滚动条向上滚还是向下滚
        if (scrollTop < top) {
          if (currentTop <= top) {
            //   window.scrollTo(x,y) y为上下滚动位置
            window.scrollTo(0, currentTop);
            requestId = window.requestAnimationFrame(step);
          } else {
            window.cancelAnimationFrame(requestId);
          }
          //向下滚动
          currentTop += speed;
        } else {
          if (top <= currentTop) {
            //注:此处 - speed 是解决居中时存在的问题,可自行设置或去掉
            window.scrollTo(0, currentTop - speed);
            requestId = window.requestAnimationFrame(step);
          } else {
            window.cancelAnimationFrame(requestId);
          }
          //向上滚动
          currentTop -= speed;
        }
      }
      window.requestAnimationFrame(step);
    }
  }
};
</script>

<style scoped>
.hold {
  width: 300px;
  margin: 0 auto;
}
.btn-box {
  background: #ccc;
  position: fixed;
  left: 60%;
}
.btn-box button {
  display: block;
  width: 100px;
  height: 50px;
  background: hsl(221, 91%, 77%);
  border: none;
  color: white;
  font-weight: bold;
  font-size: 1.5rem;
  cursor: pointer;
}
.btn-box button:hover {
  background: hsl(221, 98%, 68%);
}
.block {
  border: 1px solid white;
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
  color: white;
  box-sizing: border-box;
  background: hsl(221, 98%, 68%);
}
</style>

参考地址://www.greatytc.com/p/f7c0b9072778

方法2:

HTML
书写方式 data-to与指定模块的id相对应

image.png

image.png

Mounted

//定义一个滚轮监听
    window.addEventListener("scroll", this.handleScroll);
    //点击侧边栏跳转到当前模块的方法
    $(".propertyDeals_line").on("click", "span", function(e) {
      var target = e.target;
      var id = $(target).data("to");
      $("html").animate({ scrollTop: $("#" + id).offset().top - 100 }, 400);
    });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • {"keys":[{"key2":"余华","key":"活着","url":"https://www.jians...
    书籍数据记录阅读 583评论 0 0
  • 最近自己写的简书文章太多了,导致很难找到之前写的文章。 于是,我想整理一篇目录,使用搜索快捷键:ctrl+F,即可...
    张云钱阅读 1,663评论 0 1
  • # Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列...
    小迈克阅读 3,061评论 1 3
  • 翔子曾经也是旁人口中“别人家的孩子”,翔子喜欢这种被夸赞的感觉,翔子梦想着能一直如此优秀下去,翔子相信只要努力,保...
    不猜人心的职场鸟人阅读 470评论 0 0
  • 理性认识vs感性认识之间巨大的鸿沟 永远的分裂 理性下对残酷的竞争,对没有爱的绝望 感性下对真爱的渴望,不惜一切的...
    helen1990_阅读 267评论 0 0