前端滾動(dòng)錨點(diǎn)三個(gè)常用方案(點(diǎn)擊后頁面滾動(dòng)到指定位置)
三個(gè)常用方案：
1.scrollintoView
把調(diào)用該方法的元素滾動(dòng)到屏幕的指定位置，中間，底部，或者頂部
優(yōu)點(diǎn)：方便，只需要獲取元素然后調(diào)用
缺點(diǎn)：不好精確控制，只能讓元素指定滾動(dòng)到中間，頂部，底部，沒法設(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">
// 五個(gè)樓層
<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
把可滾動(dòng)元素滾動(dòng)到指定x，y坐標(biāo)優(yōu)點(diǎn):可以精確控制到具體多少px
缺點(diǎn)：得先獲取到x，y坐標(biāo)
需要注意的是，這個(gè)方法的調(diào)用者并不是要看到的元素，而是可滾動(dòng)的元素。像方法一，調(diào)用scrollintoView方法的是五個(gè)樓層本身，但是如果是調(diào)
用scrollTo的話是調(diào)用他們的父級(jí)元素（id="home"的div盒子）它才是可滾動(dòng)的元素.
<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
滾動(dòng)指定的x，y距離。也就是讓他滾動(dòng)一定距離，不指定坐標(biāo)
優(yōu)點(diǎn):當(dāng)我們只是做移動(dòng)，而不是滾到某個(gè)指定的元素時(shí)
缺點(diǎn):得自己算出多少距離
這個(gè)方法用的少就不舉例了
最后：要注意的點(diǎn)，記住這么幾個(gè)操作
1，如果是打開就滾動(dòng)到指定位置，vue/react項(xiàng)目一定要在你頁面數(shù)據(jù)渲染完成后滾動(dòng)
2，如果不含有請(qǐng)求，記得在onMounted(vue)，或者useEffect(react)中進(jìn)行滾動(dòng)操作，如果是頁面滾動(dòng)，可能還要在加一個(gè)小延遲（setTimeout）
3，如果頁面的數(shù)據(jù)是請(qǐng)求來的，請(qǐng)確保數(shù)據(jù)渲染完成后進(jìn)行滾動(dòng)
頁面滾動(dòng)是會(huì)記錄上一次滾動(dòng)狀態(tài)的，在頁面渲染好后又會(huì)滾回去。記錄頁面滾動(dòng)這個(gè)現(xiàn)象一般只限于同步引入的組件，異步的不會(huì)（沒有滾動(dòng)記錄）
總結(jié)
到此這篇關(guān)于前端滾動(dòng)錨點(diǎn)三個(gè)常用方案的文章就介紹到這了,更多相關(guān)前端滾動(dòng)到指定位置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
30個(gè)高逼格代碼的JavaScript高級(jí)單行代碼
這篇文章中列出了一個(gè)系列的 30 個(gè) JavaScript 單行代碼,它們在使用 vanilla js（≥ ES6）進(jìn)行開發(fā)時(shí)非常有用,它們也是使用該語言在最新版本中為我們提供的所有功能來解決問題的優(yōu)雅方式,將它們分為以下5大類：日期、字符串、數(shù)字、數(shù)組、工具2023-08-08
JS+canvas動(dòng)態(tài)繪制餅圖的方法示例
這篇文章主要介紹了JS+canvas動(dòng)態(tài)繪制餅圖的方法,結(jié)合具體實(shí)例形式分析了js+canvas實(shí)現(xiàn)餅狀圖形繪制的相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
JS正則表達(dá)式學(xué)習(xí)之貪婪和非貪婪模式實(shí)例總結(jié)
這篇文章主要介紹了JS正則表達(dá)式學(xué)習(xí)之貪婪和非貪婪模式用法,結(jié)合實(shí)例形式總結(jié)分析了JS正則表達(dá)式中貪婪模式與非貪婪模式的具體功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12
js實(shí)現(xiàn)同一個(gè)頁面多個(gè)漸變效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)同一個(gè)頁面多個(gè)漸變效果的方法,涉及javascript操作漸變效果的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
JS實(shí)現(xiàn)在頁面隨時(shí)自定義背景顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)在頁面隨時(shí)自定義背景顏色的方法,實(shí)例分析了javascript操作css樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
JavaScript提供了豐富的屬性操作方法,用于操作各種HTML元素,下面這篇文章主要給大家介紹了關(guān)于用js插入HTML元素的相關(guān)資料,文章通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
本篇文章主要介紹了js出生日期 年月日級(jí)聯(lián)菜單的示例代碼。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
javascript實(shí)現(xiàn)移動(dòng)的模態(tài)框效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)移動(dòng)的模態(tài)框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
基于bootstrap實(shí)現(xiàn)多個(gè)下拉框同時(shí)搜索功能
這篇文章主要為大家詳細(xì)介紹了基于bootstrap實(shí)現(xiàn)多個(gè)下拉框同時(shí)搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
本文主要分享了原生js實(shí)現(xiàn)無縫輪播圖效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01