乐趣区

关于javascript:推荐使用锚点做页面滚动比scrollTop好用

jiezi

问题形容

需要：页面有列表项，以及列表明细项，点击列表某一项，滚动到对应列表明细项。对于这样需要，除了应用 DOM.scrollTop 以外，也能够应用锚点搭配 DOM.scrollIntoView 办法去实现，对于 api 概念定义，这里不赘述。详情看官网文档：

scrollTop: https://developer.mozilla.org…

scrollIntoView: https://developer.mozilla.org…

留神：锚点并不是非得搭配 a 标签应用哦，别的标签也能够的

效果图

实例代码 

<template>
  <div ref="toTopRef" class="box">
    <div class="anchorsWrap">
      <h3 @click="toTop"> 回到顶部 </h3>
      <br />
      <h3 @click="anchorJump('xiyouji')"> 跳转到西游记 </h3>
      <br />
      <h3 @click="anchorJump('shuihuzhuan')"> 跳转到水浒传 </h3>
      <br />
      <h3 @click="anchorJump('hongloumeng')"> 跳转到红楼梦 </h3>
      <br />
    </div>
    <div class="contentWrap">
      <div>
        <p> 锚点跳转 </p>
        <p> 很不错哦 </p>
        <p> 举荐应用 </p>
        <p> 某些场景 </p>
        <p> 比 scrollTop</p>
        <p> 更加不便 </p>
      </div>
      <div>
        <!-- 来一个锚点 id -->
        <h3 id="xiyouji"> 西游记 </h3>
        <p> 孙悟空 </p>
        <p> 猪八戒 </p>
        <p> 沙和尚 </p>
        <p> 唐僧 </p>
        <p> 孙悟空 </p>
        <p> 猪八戒 </p>
        <p> 沙和尚 </p>
        <p> 唐僧 </p>
        <p> 孙悟空 </p>
        <p> 猪八戒 </p>
        <p> 沙和尚 </p>
        <p> 唐僧 </p>
        <p> 唐僧 </p>
        <p> 孙悟空 </p>
        <p> 猪八戒 </p>
        <p> 沙和尚 </p>
        <p> 唐僧 </p>
      </div>
      <div>
        <!-- 来一个锚点 id -->
        <h3 id="shuihuzhuan"> 水浒传 </h3>
        <p> 李逵 </p>
        <p> 吴用 </p>
        <p> 林冲 </p>
        <p> 武松 </p>
        <p> 李逵 </p>
        <p> 吴用 </p>
        <p> 林冲 </p>
        <p> 武松 </p>
        <p> 李逵 </p>
        <p> 吴用 </p>
        <p> 林冲 </p>
        <p> 武松 </p>
        <p> 李逵 </p>
        <p> 吴用 </p>
        <p> 林冲 </p>
        <p> 武松 </p>
      </div>
      <div>
        <!-- 来一个锚点 id -->
        <h3 id="hongloumeng"> 红楼梦 </h3>
        <p> 贾宝玉 </p>
        <p> 林黛玉 </p>
        <p> 王熙凤 </p>
        <p> 贾宝玉 </p>
        <p> 林黛玉 </p>
        <p> 王熙凤 </p>
        <p> 贾宝玉 </p>
        <p> 林黛玉 </p>
        <p> 王熙凤 </p>
        <p> 贾宝玉 </p>
        <p> 林黛玉 </p>
        <p> 王熙凤 </p>
        <p> 贾宝玉 </p>
        <p> 林黛玉 </p>
        <p> 王熙凤 </p>
        <p> 贾宝玉 </p>
        <p> 林黛玉 </p>
        <p> 王熙凤 </p>
        <p> 贾宝玉 </p>
        <p> 林黛玉 </p>
        <p> 王熙凤 </p>
        <p> 贾宝玉 </p>
        <p> 林黛玉 </p>
        <p> 王熙凤 </p>
        <p> 贾宝玉 </p>
        <p> 林黛玉 </p>
        <p> 王熙凤 </p>
        <p> 贾宝玉 </p>
        <p> 林黛玉 </p>
        <p> 王熙凤 </p>
        <p> 贾宝玉 </p>
        <p> 林黛玉 </p>
        <p> 王熙凤 </p>
        <p> 贾宝玉 </p>
        <p> 林黛玉 </p>
        <p> 王熙凤 </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {anchorJump(which) {
      let id = "#" + which; // 给 id 加上井号
      // 给对应 dom 滚动到对应锚点，使之呈现在视图中
      document.querySelector(id).scrollIntoView({
        behavior: "smooth", // 定义过渡动画 instant 立即跳过去 smooth 平滑过渡过来
        block: "start", // 定义垂直滚动方向的对齐 start 顶部（尽可能）center 两头（尽可能）end（底部）inline: "center", // 定义程度滚动方向的对齐
      });
    },
    toTop() {if (this.$refs.toTopRef.scrollTop == 0) {return;}
      /**
       * 应用循环定时器，定时更新其高度，直至高度为 0，才去革除定时器
       * 同时再更正一下高度地位为 0
       * */
      let timer = setInterval(() => {
        this.$refs.toTopRef.scrollTop = this.$refs.toTopRef.scrollTop - 30;
        console.log("实时高度 scrollTop", this.$refs.toTopRef.scrollTop);
        if (this.$refs.toTopRef.scrollTop <= 0) {clearInterval(timer);
          this.$refs.toTopRef.scrollTop = 0;
        }
      }, 16); // 30 和 16 这两个参数感觉比拟平滑一些
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 24px;
  // 作为容器，要开启滚动条
  overflow-y: auto;
  .anchorsWrap {
    position: fixed;
    left: 480px;
    h3 {cursor: pointer;}
    h3:hover {box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
    }
  }
}
</style>

好忘性不如烂笔头，记录一下吧 ^_^

退出移动版