前端滾動錨點三個常用方案(點擊后頁面滾動到指定位置)
三個常用方案：
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>3.scrollBy
滾動指定的x，y距離。也就是讓他滾動一定距離，不指定坐標(biāo)
優(yōu)點:當(dāng)我們只是做移動，而不是滾到某個指定的元素時
缺點:得自己算出多少距離
這個方法用的少就不舉例了
最后：要注意的點，記住這么幾個操作
1，如果是打開就滾動到指定位置，vue/react項目一定要在你頁面數(shù)據(jù)渲染完成后滾動
2，如果不含有請求，記得在onMounted(vue)，或者useEffect(react)中進行滾動操作，如果是頁面滾動，可能還要在加一個小延遲（setTimeout）
3，如果頁面的數(shù)據(jù)是請求來的，請確保數(shù)據(jù)渲染完成后進行滾動
頁面滾動是會記錄上一次滾動狀態(tài)的，在頁面渲染好后又會滾回去。記錄頁面滾動這個現(xiàn)象一般只限于同步引入的組件，異步的不會（沒有滾動記錄）
總結(jié)
到此這篇關(guān)于前端滾動錨點三個常用方案的文章就介紹到這了,更多相關(guān)前端滾動到指定位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
style、 currentStyle、 runtimeStyle區(qū)別分析
style、 currentStyle、 runtimeStyle區(qū)別分析,需要的朋友可以參考下。2010-08-08
這篇文章主要給大家介紹了關(guān)于javascript隱藏顯示div的兩種方式,實現(xiàn)的代碼很簡單,點擊時先判斷div是否是顯示,如果div是顯示就把div設(shè)置為隱藏,否則就變?yōu)轱@示,需要的朋友可以參考下2022-09-09
控制瀏覽器全屏的方法有很多，下面為大家介紹下js是如何做到的2014-02-02
IE view-source 無法查看看源碼 JavaScript看網(wǎng)頁源碼
查看網(wǎng)頁源代碼的方法其實有好幾種，最常用的我們就是在瀏覽器中直接選擇“查看網(wǎng)頁源代碼”就可以了，但是在有些時候這種方法卻不能見效，以下再介紹幾種簡單的方法供大家參考！2009-07-07
JavaScript函數(shù)內(nèi)部屬性和函數(shù)方法實例詳解
函數(shù)是由事件驅(qū)動的或者當(dāng)它被調(diào)用時執(zhí)行的可重復(fù)使用的代碼塊。通過本文給大家介紹JavaScript函數(shù)內(nèi)部屬性和函數(shù)方法，感興趣的朋友一起學(xué)習(xí)吧2016-03-03
在Electron開發(fā)過程中,每次代碼修改后需手動重新啟動應(yīng)用,這一過程可以通過引入Nodemon工具自動化,Nodemon能夠監(jiān)測文件變化并自動重啟服務(wù)器,本文給大家介紹Electron 使用 Nodemon 配置自動重啟,感興趣的朋友一起看看吧2024-09-09
這篇文章主要介紹了如何使用JavaScript檢測空閑的瀏覽器選項卡，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
一文帶你掌握J(rèn)avaScript中的執(zhí)行上下文和作用域
作為一名前端工作人員，我們必須知道JavaScript內(nèi)部是如何執(zhí)行的。那對于執(zhí)行上下文和作用域的理解至關(guān)重要，無論是工作還是面試都是無法跳躍的一步，本文就來帶大家深入了解一下2023-02-02
JS匿名函數(shù)和匿名自執(zhí)行函數(shù)概念與用法分析
這篇文章主要介紹了JS匿名函數(shù)和匿名自執(zhí)行函數(shù)概念與用法,結(jié)合實例形式分析了匿名函數(shù)和匿名自執(zhí)行函數(shù)的概念、功能、應(yīng)用場景及相關(guān)使用技巧,需要的朋友可以參考下2018-03-03
javascript實現(xiàn)漢字轉(zhuǎn)拼音代碼分享
這篇文章主要介紹了javascript實現(xiàn)漢字轉(zhuǎn)拼音代碼分享，非常的實用，從項目中分離出來的，這里分享給大家，有需要的小伙伴可以參考下。2015-04-04