前端滚动锚点三个常用方案(点击后页面滚动到指定位置)

<script setup>
import {onMounted, ref } from 'vue'
import {useRoute }from 'vue-router'
const { query }= useRoute();
const target = query.target
onMounted(()=>{
   document.getElementById(target)?.scrollIntoView({
   block:'center'
  })
})
</script>
 
<template>
  <button>美妆</button>
  <button>数码</button>
  <button>美食</button>
  <button>家居</button>
  <button>黄金</button>
 <div class="home" id="home">
   // 五个楼层
   <div class="part" id="part1">美妆</div>
   <div class="part" id="part2">数码</div>
   <div class="part" id="part3">美食</div>
   <div class="part" id="part4">家居</div>
   <div class="part" id="part5">黄金</div>
 </div>
</template>
 
<style>
.home {
  width: 1000px;
  margin: 0 auto;
  height: 90vh;
  overflow-y: scroll;
}
.part {
  margin-top: 20px;
  border: 1px solid red;
  height: 600px;
}
.needData {
  height: 600px;
}
</style>

<script setup>
import {onMounted, ref } from 'vue'
import {useRoute }from 'vue-router'
const { query }= useRoute();
const target = query.target
onMounted(()=>{
   const targetDom = document.getElementById(target);
   const targetRect = targetDom.getBoundingClientRect();
   document.getElementById(home)?.scrollTo(targetRect.x, targetRect.y - 100);
})
</script>

<template>
  <button>美妆</button>
  <button>数码</button>
  <button>美食</button>
  <button>家居</button>
  <button>黄金</button>
 <div class="home" id="home">
   <div class="part" id="part1">美妆</div>
   <div class="part" id="part2">数码</div>
   <div class="part" id="part3">美食</div>
   <div class="part" id="part4">家居</div>
   <div class="part" id="part5">黄金</div>
 </div>
</template>