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

三个常用方案：

1.scrollintoview

把调用该方法的元素滚动到屏幕的指定位置，中间，底部，或者顶部

优点：方便，只需要获取元素然后调用

缺点：不好精确控制，只能让元素指定滚动到中间，顶部，底部，没法设置偏移

block可以设置为center，end，start等来控制在页面显示的位置。

注意的就是

<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>

2.scrollto

把可滚动元素滚动到指定x，y坐标优点:可以精确控制到具体多少px

缺点：得先获取到x，y坐标

需要注意的是，这个方法的调用者并不是要看到的元素，而是可滚动的元素。像方法一，调用scrollintoview方法的是五个楼层本身，但是如果是调

用scrollto的话是调用他们的父级元素（id="home"的div盒子）它才是可滚动的元素.

<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>