vue项目中使用锚点

2021-01-20  本文已影响0人  A_dfa4

document.querySelector("#你设置的位置").scrollIntoView(true);

scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"})
附上MDN文档地址:https://developer.mozilla.org...


<div class="product">
   <el-button size="mini" round @click="goAnchor('#anchor1')">了解更多</el-button>
  <el-button size="mini" round @click="goAnchor('#anchor2')">了解更多</el-button>
  <el-button size="mini" round @click="goAnchor('#anchor3')">了解更多</el-button>
</div>

<div class="introduce">
  <div class="introduce-item1" id="anchor1">
  <div class="introduce-item2" id="anchor2">
  <div class="introduce-item3" id="anchor3">
</div>
<script>
  goAnchor(selector) {
      document.querySelector(selector).scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
  }
</script>
上一篇 下一篇

猜你喜欢

热点阅读