快捷導(dǎo)航

前端滾動錨點三個常用方案(點擊后頁面滾動到指定位置)

更新時間：2025年01月10日 09:42:39 作者：Gaga??

這篇文章主要給大家介紹了關(guān)于前端滾動錨點的三個常用方案,實現(xiàn)的效果就是點擊后頁面滾動到指定位置,三種方法分別是scrollIntoView、scrollTo和scrollBy,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

三個常用方案：

1.scrollintoView

把調(diào)用該方法的元素滾動到屏幕的指定位置，中間，底部，或者頂部

優(yōu)點：方便，只需要獲取元素然后調(diào)用

缺點：不好精確控制，只能讓元素指定滾動到中間，頂部，底部，沒法設(shè)置偏移

block可以設(shè)置為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>數(shù)碼</button>
  <button>美食</button>
  <button>家居</button>
  <button>黃金</button>
 <div class="home" id="home">
   // 五個樓層
   <div class="part" id="part1">美妝</div>
   <div class="part" id="part2">數(shù)碼</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坐標(biāo)優(yōu)點:可以精確控制到具體多少px

缺點：得先獲取到x，y坐標(biāo)

需要注意的是，這個方法的調(diào)用者并不是要看到的元素，而是可滾動的元素。像方法一，調(diào)用scrollintoView方法的是五個樓層本身，但是如果是調(diào)

用scrollTo的話是調(diào)用他們的父級元素（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>數(shù)碼</button>
  <button>美食</button>
  <button>家居</button>
  <button>黃金</button>
 <div class="home" id="home">
   <div class="part" id="part1">美妝</div>
   <div class="part" id="part2">數(shù)碼</div>
   <div class="part" id="part3">美食</div>
   <div class="part" id="part4">家居</div>
   <div class="part" id="part5">黃金</div>
 </div>
</template>