美文网首页
vue项目中使用锚点

vue项目中使用锚点

作者: A_dfa4 | 来源:发表于2021-01-20 10:56 被阅读0次

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>

相关文章

网友评论

      本文标题:vue项目中使用锚点

      本文链接:https://www.haomeiwen.com/subject/dozhzktx.html