javascript一行代码实现锚点功能

<template>
  <div style="height: 100%;">
    <div @click="goView('i3')">gogogogogogo</div>
    <div id="i1" style="height: 100%;">1</div>
    <div id="i2" style="height: 100%;">2</div>
    <div id="i3" style="height: 100%;">3</div>
    <div id="i4" style="height: 100%;">4</div>
    <div id="i5" style="height: 100%;">5</div>
  </div>
</template>

<script>
import { IndexBar, IndexAnchor } from "vant";
export default {
  components: {
    "van-index-bar": IndexBar,
    "van-index-anchor": IndexAnchor
  },
  data() {
    return {
      indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    };
  },
  methods: {
    goView(val) {
      document.querySelector("#" + val).scrollIntoView({
        behavior: "smooth",
        block: "end",
        inline: "nearest"
      });
    }
  }
};
</script>

<style lang="scss">
html,
body,
#app {
  height: 100%;
}
</style>

 详细用法MDN地址:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

posted on 2020-11-23 16:14  写最骚的代码  阅读(223)  评论(0编辑  收藏  举报