umi4+vue3项目：实现锚点定位

本文主要应用场景：
导航栏点击切换tab可进行锚点定位，相应tab的内容展示到顶部；

element.scrollIntoView();// 等同于element.scrollIntoView(true);
true : 元素的顶部将对齐到可滚动祖先的可见区域的顶部。
false:元素的底部将与可滚动祖先的可见区域的底部对齐。
element.scrollIntoView(scrollIntoViewOptions);//对象参数
block | [可选] “start”，“center”，“end"或"nearest”。默认为"center"。
inline | [可选] “start”，“center”，“end"或"nearest”。默认为"nearest"。

element.scrollIntoView({block: "end", inline: "nearest"});

主要代码

 const scrollToAnchor = (anchorName: string) => {
   if (anchorName) {
     // 找到锚点
     let anchorElement = document.getElementById(anchorName);
     // 如果对应id的锚点存在，就跳转到锚点
     if (anchorElement) {
       // { block: "start", behavior: "smooth" }
       anchorElement.scrollIntoView({ block: "start", behavior: "smooth" });
       console.log("anchorElement", anchorElement.getAttribute);

       anchorElement.setAttribute("class", "text-paragraph scrollItem");
     }
   }
 };

测试实例代码

<template>
  <div class="doc_page">
    <p>This is umi docs.</p>
    <menu-item :menuList="menuList"></menu-item>
    <div class="case-content">
      <div class="nav">
        <t-button
          variant="dashed"
          theme="danger"
          ghost
          v-for="item in navList"
          :key="item?.name"
          @click="scrollToAnchor(item?.id)"
        >
          {{ item?.name }}
        </t-button>
      </div>
      <div class="text-paragraph" id="doc_text_paragraph_1">
        <h4>this is 1</h4>
        　22
      </div>
      <div class="text-paragraph" id="doc_text_paragraph_2">
        <h4>this is 2</h4>
        　　
      </div>
      <div class="text-paragraph" id="doc_text_paragraph_4">
        <h4>this is 4</h4>
44
      </div>
      <div class="text-paragraph" id="doc_text_paragraph_5">
        <h4>this is 5</h4>
      </div>
      <div class="text-paragraph" id="doc_text_paragraph_6">
        <h4>this is 6</h4>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
import MenuItem from "@/components/MenuItem/index.vue";
import { Button as TButton } from "tdesign-vue-next";
const list = [
  {
    name: "list111",
    id: "list1111",
    level: 0,
    children: [
      {
        name: "list111---1",
        id: "list1111---1",
        level: 1,
      },
      {
        name: "list111---2",
        id: "list1111---2",
        level: 1,
      },
      {
        name: "list111---3",
        id: "list1111---3",
        level: 1,
      },
      {
        name: "list111---4",
        id: "list1111---4",
        level: 1,
      },
    ],
  },
  {
    name: "list112",
    id: "list1112",
    level: 0,
  },
  {
    name: "list113",
    id: "list1113",
    level: 0,
    children: [
      {
        name: "list113---1",
        id: "list1113---1",
        level: 1,
      },
      {
        name: "list113---2",
        id: "list1113---2",
        level: 1,
      },
      {
        name: "list113---3",
        id: "list1113---3",
        level: 1,
      },
      {
        name: "list113---4",
        id: "list1113---4",
        level: 1,
      },
    ],
  },
  {
    name: "list114",
    id: "list1114",
    level: 0,
  },
];

const nav = [
  {
    id: "doc_text_paragraph_1",
    name: "段落一",
  },
  {
    id: "doc_text_paragraph_2",
    name: "段落二",
  },
  {
    id: "doc_text_paragraph_3",
    name: "段落三",
  },
  {
    id: "doc_text_paragraph_4",
    name: "段落四",
  },
  {
    id: "doc_text_paragraph_5",
    name: "段落五",
  },
  {
    id: "doc_text_paragraph_6",
    name: "段落六",
  },
];
export default defineComponent({
  components: {
    MenuItem,
    TButton,
  },
  setup() {
    const state = reactive({
      menuList: list,
      navList: nav,
    });

    const scrollToAnchor = (anchorName: string) => {
      if (anchorName) {
        // 找到锚点
        let anchorElement = document.getElementById(anchorName);
        // 如果对应id的锚点存在，就跳转到锚点
        if (anchorElement) {
          // { block: "start", behavior: "smooth" }
          anchorElement.scrollIntoView({ block: "start", behavior: "smooth" });
          console.log("anchorElement", anchorElement.getAttribute);

          anchorElement.setAttribute("class", "text-paragraph scrollItem");
        }
      }
    };

    return {
      ...state,
      scrollToAnchor,
    };
  },
});
</script>
<style lang="less" scoped>
.case-content {
  position: relative;
}
.text-paragraph {
  height: 400px;
  width: 600px;
  border: 1px #888 solid;
  margin-top: 10px;
  margin-bottom: 20px;
}
.t-button {
  margin-right: 20px;
}
.nav {
  position: sticky;
  top: 0;
  // background-color: #fff;
  background-color: #000;
  padding: 4px 0;
}
.scrollItem {
  margin-top: 60px;
}
</style>

Element.scrollIntoView()应用场景

1. URL中hash标记的进化
2. 聊天窗口滚动显示最新的消息
3. 往一个列表添加item后滚动显示最新的添加的item
4. 回到顶部(#)
5. 滚动到指定位置(#xxx)