前端滚动锚点(点击后页面滚动到指定位置)

三个常用方案:
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.mzph.cn/web/63699.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端笔记——大数据量浏览器卡顿优化思路

多任务数据量处理卡顿问题 任务分批次 为避免阻塞&#xff0c;可以将 长时间的单一任务 拆分成多个小任务并分批执行。这样可以在两次任务之间让浏览器有时间处理渲染、用户输入等操作。两种常见方法&#xff1a; setTimeout 方法&#xff1a; 使用 setTimeout 将任务分段&a…

数智化转型是什么?

数智化转型是指企业通过数字化&#xff08;Digitalization&#xff09;和智能化&#xff08;Intelligentization&#xff09;技术的结合&#xff0c;推动业务流程、产品服务、组织管理的全面升级&#xff0c;从而提升效率、增强创新能力&#xff0c;并实现更高价值。相比传统的…

RIP实验

要求及分析 路由器上分别配置环回 连接路由器的线路网段为12.1.1.0/24、23.1.1.1.0/24 R1和R3连接的网络地址分别为192.168.1.0/24/192.168.2.0/24 整个网络使用RIP达到全网可达 配置 先配置路由器各接口ip和环回和pc ip网关掩码&#xff08;图略&#xff09; 进行 RI…

Oracle 中间件 Webcenter Portal服务器环境搭建

环境信息 服务器基本信息 如下表&#xff0c;本次安装总共使用2台服务器&#xff0c;具体信息如下&#xff1a; Webcenter1服务器 归类 SOA服务器 Ip Address 172.xx.xx.xx.xx HostName wcc01.xxxxxx.com Alias wccprd01 Webcenter2服务器 归类 OSB服务器 Ip Addr…

macOS 配置 vscode 命令行启动

打开 vscode 使用 cmd shift p 组合快捷键&#xff0c;输入 install 点击 Install ‘code’ command in PATH Ref https://code.visualstudio.com/docs/setup/mac

3、交换机IP路由功能

每个用例前自己最好先画个图&#xff0c;不然容易绕晕&#xff0c;这篇文章写好久了&#xff0c;自己都觉得有点绕 一、直连路由 如果一个交换机与另一个交换机时直连着的并且他们用来连接的端口属于同网段&#xff0c;那么这种情况下他们就属于直连路由。不需要做任何配置便可…

分层架构 IM 系统之多媒体功能设计与实现

现在 IM 系统已经不仅限于文本消息的通讯了&#xff0c;多媒体数据占据越来越多的比重&#xff0c;比如&#xff1a;文件传输、语音通话、视频通话等。 在前面的文章&#xff08;《基于需求分析模型来结构化剖析 IM 系统》&#xff09;中我们分析过&#xff0c;“多媒体消息”…

0.gitlab ubuntu20.04 部署问题解决

安装依赖&#xff1a; ① sudo apt-get update 出现&#xff1a; 解决方式&#xff1a; 去 /etc/apt/sources.list.d 这个目录删除或注释对应的list文件 第三方软件的源一般都以list文件的方式放在 /etc/apt/sources.list.d 这个目录 重新运行sudo apt-get update 安装…

Next.js v15 - 服务器操作以及调用原理

约定 服务器操作是在服务器上执行的异步函数。它们可以在服务器组件和客户端组件中调用&#xff0c;用于处理 Next.js 应用程序中的表单提交和数据修改。 服务器操作可以通过 React 的 “use server” 指令定义。你可以将该指令放在 async 函数的顶部以将该函数标记为服务器操…

什么是3DEXPERIENCE SOLIDWORKS,它有哪些角色和功能?

将业界领先的 SOLIDWORKS 3D CAD 解决方案连接到基于单一云端产品开发环境 3DEXPERIENCE 平台。您的团队、数据和流程全部连接到一个平台进行高效的协作工作&#xff0c;从而能快速的做出更好的决策。 目 录&#xff1a; ★ 1 什么是3DEXPERIENCE SOLIDWORKS ★ 2 3DEXPERIE…

【华为OD-E卷-开心消消乐 100分(python、java、c++、js、c)】

【华为OD-E卷-开心消消乐 100分&#xff08;python、java、c、js、c&#xff09;】 题目 给定一个 N 行 M 列的二维矩阵&#xff0c;矩阵中每个位置的数字取值为 0 或 1。矩阵示例如&#xff1a; 1 1 0 0 0 0 0 1 0 0 1 1 1 1 1 1 现需要将矩阵中所有的 1 进行反转为 0&#…

[Unity]【图形渲染】【游戏开发】Shader数学基础4-更多矢量运算

在计算机图形学和着色器编程中,矢量运算是核心的数学工具之一。矢量用于描述空间中的位置、方向、速度等各种物理量,并在图形变换、光照计算、纹理映射等方面起着至关重要的作用。本篇文章将详细讲解矢量和标量之间的乘法与除法、矢量的加法与减法、矢量的模与单位矢量、点积…

【漏洞复现】CVE-2023-37461 Arbitrary File Writing

漏洞信息 NVD - cve-2023-37461 Metersphere is an opensource testing framework. Files uploaded to Metersphere may define a belongType value with a relative path like ../../../../ which may cause metersphere to attempt to overwrite an existing file in the d…

Bcrypt在线密码加密生成器

具体前往&#xff1a;在线Bcrypt加密工具--使用bcrypt及生成salt的迭代次数强度参数计算生成哈希(摘要)

Django 模板分割及多语言支持案例【需求文档】-->【实现方案】

Django 模板分割及多语言支持案例 这个案例旨在提供一个清晰的示范&#xff0c;展示如何将复杂的页面分解为多个可复用的模板组件&#xff0c;使代码更加模块化和易于管理。希望这篇案例文章对你有所帮助。 概述 在 Django 项目开发中&#xff0c;使用模板分割和多语言支持能…

wxWidgets使用wxStyledTextCtrl(Scintilla编辑器)的正确姿势

开发CuteMySQL/CuteSqlite开源客户端的时候&#xff0c;需要使用Scintilla编辑器&#xff0c;来高亮显示SQL语句&#xff0c;作为C/C领域最成熟稳定又小巧的开源编辑器&#xff0c;Scintilla提供了强大的功能&#xff0c;wxWidgets对Scintilla进行包装后的是控件类&#xff1a;…

构建高性能异步任务引擎:FastAPI + Celery + Redis

在现代应用开发中&#xff0c;异步任务处理是一个常见的需求。无论是数据处理、图像生成&#xff0c;还是复杂的计算任务&#xff0c;异步执行都能显著提升系统的响应速度和吞吐量。今天&#xff0c;我们将通过一个实际项目&#xff0c;探索如何使用 FastAPI、Celery 和 Redis …

介绍 Html 和 Html 5 的关系与区别

HTML&#xff08;HyperText Markup Language&#xff09;是构建网页的标准标记语言&#xff0c;而 HTML5 是 HTML 的最新版本&#xff0c;包含了一些新的功能、元素、API 和属性。HTML5 相对于早期版本的 HTML&#xff08;比如 HTML4&#xff09;有许多重要的改进和变化。以下是…

【win10+RAGFlow+Ollama】搭建本地大模型助手(教程+源码)

一、RAGFlow简介 RAGFlow是一个基于对文档深入理解的开源RAG&#xff08;Retrieval-augmented Generation&#xff0c;检索增强生成&#xff09;引擎。 主要作用&#xff1a; 让用户创建自有知识库&#xff0c;根据设定的参数对知识库中的文件进行切块处理&#xff0c;用户向大…

qwt 之 QwtPlotPicker

QwtPlotMarker 和 QwtPlotPicker 是 Qwt 库中用于增强 QwtPlot 功能的两个重要类。它们分别用于在图中添加标记和实现交互式的选择或拖动功能。 QwtPlotPicker 提供了交互式的选择工具&#xff0c;它允许用户通过鼠标点击或拖动来选择图表中的数据点或区域。这对于实现缩放、平…