当前位置：首页 > article >正文

前端滚动锚点（点击后页面滚动到指定位置）

article 2024/12/22 17:18:03

三个常用方案：
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>

3.scrollBy
滚动指定的x，y距离。也就是让他滚动一定距离，不指定坐标
优点:当我们只是做移动，而不是滚到某个指定的元素时
缺点:得自己算出多少距离
这个方法用的少就不举例了

最后：要注意的点，记住这么几个操作
1，如果是打开就滚动到指定位置，vue/react项目一定要在你页面数据渲染完成后滚动
2，如果不含有请求，记得在onMounted(vue)，或者useEffect(react)中进行滚动操作，如果是页面滚动，可能还要在加一个小延迟（setTimeout）
3，如果页面的数据是请求来的，请确保数据渲染完成后进行滚动

页面滚动是会记录上一次滚动状态的，在页面渲染好后又会滚回去。记录页面滚动这个现象一般只限于同步引入的组件，异步的不会（没有滚动记录）

查看全文

http://www.kler.cn/a/446768.html