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

4种方法实现html 页面内锚点定位及跳转

news 文章来源：https://blog.csdn.net/m0_46672781/article/details/132497712 2025/2/2 1:46:25

使用scrollIntoView进行锚点定位效果

不知道你有没有遇到这样的需求：锚点定位？进入页面某个元素需要出现在可视区？…这一类的需求归根结底就是处理元素与可视区域的关系。我接触了很多前端小伙伴，实现的方式有各种各样的，比如使用 scrollTop、监听滚动等等，这也是很多小伙伴第一个想到的。 今天我们介绍一种更简单的方式：scrollIntoView。

项目中经常会出现点击跳转锚点的方法，比如给一个a标签一个href=“#锚点”，然后要跳的锚点给个id=“锚点”，这样就实现简单的跳转，但是这样在url地址栏后面都会出现一个诸如www.geekjc.com/#锚点，然后你点击给一次后退都是退回上一个选择的锚点url，这里我总结4个跳转锚点的方法。

a标签进行定位

  • 也是最简单的方法是锚点用标签，在href属性中写入div的id
<style>  div {  height: 800px;  width: 400px;  border: 2px solid black;  }  h2 {  position: fixed;  margin:50px 500px;  }  
</style>  <h2>  <a href="#div1">to div1</a>  <a href="#div2">to div2</a>  <a href="#div3">to div3</a>  
</h2>  <div id="div1">div1</div>  <div id="div2">div2</div>  <div id="div3">div3</div>

这种方法的缺点是点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题。

js事件

window.location.hash="divId"

跳转，但地址也会发生变化，感觉跟第一种方法没区别，甚至更麻烦

利用animate属性

是用animate属性，当点击锚点后，页面滚动到相应的DIV。

$(document).ready(function() {$("#div1Link").click(function() {$("html, body").animate({scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});return false;});$("#div2Link").click(function() {$("html, body").animate({scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});return false;});$("#div3Link").click(function() {$("html, body").animate({scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});return false;});
});
代码我没验证这段来自-》》》》》
作者：Flutter错误集
链接：https://juejin.cn/post/6908965295109603335
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

srollIntoView方法

  • scrollIntoView 是 HTMLElement 集合下的一个 API，每一个 HTML 元素都拥有这个 API。它的作用就和字面意思一样：滚动到可视区。 为了更加官方一点，我们还是先来看看官方的解释。
  • 官方解释：Element 接口的 scrollIntoView()方法会滚动元素的父容器，使被调用 scrollIntoView()的元素对用户可见。
  • 官方的解释还是比较好理解的，我们摘要几个关键词出来：
    • Element 接口
    • 滚动
    • 可见
    从上我们大致也能理解，无非就是让某一个元素对用户可见，但是为了更准确又通俗一点，我们用自己的话简单概述一遍。
    scrollIntoView()是 HTML 元素的一个方法，假如我们有一个元素容器出现了滚动条，有滚动条必然就有一些元素是不可见的，为了让隐藏的元素可见，我们可以手动滚动滚动条，让元素出现，另一种方法就是调用隐藏元素的 scrollIntoView 方法，让它自动滚动到可视区内。
element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数

参数解释：
• alignToTop：它是一个 Boolean 值，它用来规定元素出现在可视区后与可视区的对齐方式，为 true 代表顶端对齐，false 代表低端对齐。
• scrollIntoViewOptions：它是一个对象，该参数主要是配置元素的动画效果以及位置的，它有以下 3 个属性：
• behavior：它定义元素出现在可视区内过程的动画，有 auto 和 smooth 两种选择。
• block：定义元素的垂直方向的对齐方式，有"start", "center", "end", 或 "nearest" 4 个选项，默认 start。
• inline：定义元素水平对齐方式，有"start", "center", "end", 或 "nearest"4 个选项，默认"nearest"。
`在这里插入代码片`

注意：
有些小伙伴可能发现两个参数都能定义元素的对齐方式，它们之间有什么联系呢？当 alignToTop 为 true 时，scrollIntoViewOptions: {block: "start", inline: "nearest"}这是它的默认值，当 alignToTop 为 false 时，scrollIntoViewOptions: {block: "end", inline: "nearest"}这是它的默认值。

<html><head><title>HTML5_ScrollInToView方法</title><meta  charset="utf-8"><style type="text/css">#myDiv{/* height:900px; */height: 50px;background-color:gray;overflow-y: scroll;}#roll_top{height:50px;background-color:green;color:#FFF;font-size:20px;position:relative;}#bottom{/* position:absolute; */display:block;left:0;bottom:0;}</style></head><body><button id="roll1">scrollIntoView(false)</button><button id="roll2">scrollIntoView(true)</button><div id="myDiv"><div id="roll_top">scrollIntoView(ture)元素上边框与视窗顶部齐平</div> <div id="bottom">scrollIntoView(false)元素下边框与视窗底部齐平</div></div></body><script>window.onload = function(){document.querySelector("#roll1").onclick = function(){document.querySelector("#roll_top").scrollIntoView(false);}document.querySelector("#roll2").onclick = function(){document.querySelector("#bottom").scrollIntoView(true);}
}</script>
</html>

如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，
以方便开发人员如何更好的控制页面的滚动。在各种专有方法中，HTML5选择了scrollIntoView()
作为标准方法。
scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，
调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么
窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素
会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部
不一定齐平，例如：
//让元素可见
document.forms[0].scrollIntoView();
当页面发生变化时，一般会用这个方法来吸引用户注意力。实际上，为某个元素设置焦点也
会导致浏览器滚动显示获得焦点的元素。
支持该方法的浏览器有 IE、Firefox、Safari和Opera。

相关文章：

4种方法实现html 页面内锚点定位及跳转

使用scrollIntoView进行锚点定位效果 不知道你有没有遇到这样的需求&#xff1a;锚点定位&#xff1f;进入页面某个元素需要出现在可视区&#xff1f;…这一类的需求归根结底就是处理元素与可视区域的关系。我接触了很多前端小伙伴&#xff0c;实现的方式有各种各样的&#xff…...

编程日记 2023/8/26 11:05:38

gitlab配置备忘

版本 gitlab 14.6.2 gitlab备份上传到阿里云oss ### Backup Settings ###! Docs: https://docs.gitlab.com/omnibus/settings/backups.html# gitlab_rails[manage_backup_path] true # gitlab_rails[backup_path] "/var/opt/gitlab/backups"###! Docs: https://…...

编程日记 2023/8/26 11:04:37

基于Centos搭建k8s仓库

系统环境&#xff1a; Red Hat Enterprise Linux 9.1 (Plow) Kernel: Linux 5.14.0-162.6.1.el9_1.x86_64 主机名地址master192.168.19.128node01192.168.19.129node02192.168.19.130 目录 1、关闭防火墙&#xff0c;关闭SElinxu &#xff0c;开启时间同步服务 2、关…...

编程日记 2023/8/26 11:03:36

浅谈泛在电力物联网发展形态与技术挑战

安科瑞 华楠 摘 要&#xff1a;泛在电力物联网是当前智能电网发展的一个方向。首先&#xff0c;总结了泛在电力物联网的主要作用和价值体现&#xff1b;其次&#xff0c;从智能电网各个环节概述了物联网技术在电力领域的已有研究和应用基础&#xff1b;进而&#xff0c;构思并…...

编程日记 2023/8/26 11:02:35

git reset --soft 用法

git reset --soft 是 Git 命令中的一个选项&#xff0c;它用于取消之前的提交&#xff0c;并将取消的更改保留在暂存区。这允许您重新组织提交历史或将更改合并到一个新的提交中&#xff0c;而不影响暂存区和工作目录中的更改。 这个命令的语法是&#xff1a; git reset --so…...

编程日记 2023/8/26 11:01:34

哪些测试仪器可以用于检测静电中和设备的性能

静电设备性能测试通常需要使用一些专门的仪器来进行。以下是一些常见的静电设备性能测试仪器&#xff1a; 1. 静电电压测试仪&#xff1a;用于测量物体表面的静电电压。它通常可以测量正负电压&#xff0c;并具有高精度和快速响应的特点。 2. 静电电荷仪&#xff1a;用于测量物…...

编程日记 2023/8/26 11:00:33

浅析 GlusterFS 与 JuiceFS 的架构异同

在进行分布式文件存储解决方案的选型时&#xff0c;GlusterFS 无疑是一个不可忽视的考虑对象。作为一款开源的软件定义分布式存储解决方案&#xff0c;GlusterFS 能够在单个集群中支持高达 PiB 级别的数据存储。自从首次发布以来&#xff0c;已经有超过十年的发展历程。目前&am…...

编程日记 2023/8/26 10:59:32

ARM开发，stm32mp157a-A7核PWM实验（驱动蜂鸣器，风扇，马达工作）

1.分析框图&#xff1b; 2.比较捕获寄存器&#xff08;产生PWM方波&#xff09;&#xff1b; 工作原理&#xff1a; 1、系统提供一个时钟源209MHZ&#xff0c;需要通过分频器进行分频&#xff0c;设置分频器值为209分频&#xff1b; 2、当定时器启动之后&#xff0c;自动重载…...

编程日记 2023/8/26 10:58:30

群狼调研（长沙眼镜店神秘顾客）|消费者需求研究方案

本文由群狼调研(长沙品牌调研)出品&#xff0c;欢迎转载&#xff0c;请注明出处。消费者需求研究方案是在开展研究之前制定的计划&#xff0c;用于指导研究的设计、实施和分析。以下是一个可能的消费者需求研究方案的大致框架&#xff1a; 1. 研究目标和问题&#xff1a; • …...

编程日记 2023/8/26 10:57:30

电脑入门：宽带路由器常见故障排除技巧

宽带路由器在企业网络中的应用是相当广泛的，在运行的过程中出现故障是在所难免的，虽然故障现象多种多样，引起故障发生的原因也不尽相同，但从大体上可以把这些故障分为硬件故障和软件故障，具体来说就是一些网络连接性问题、配置文件选项问题以及网络协议问题等。 由于路由器…...

编程日记 2023/8/26 10:56:28

基于云原生网关的流量防护实践

作者&#xff1a;涂鸦 背景 在分布式系统架构中&#xff0c;每个请求都会经过很多层处理&#xff0c;比如从入口网关再到 Web Server 再到服务之间的调用&#xff0c;再到服务访问缓存或 DB 等存储。在下图流量防护体系中&#xff0c;我们通常遵循流量漏斗原则进行流量防护。…...

编程日记 2023/8/26 10:55:27

开源与云计算：新的合作模式

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

编程日记 2023/8/26 10:54:25

前端需要理解的跨平台知识

混合开发是指使用多种开发模开发App的一种开发模式&#xff0c;涉及到两大类技术&#xff1a;原生 Native、Web H5。原生 Native 主要指 iOS&#xff08;Objective C&#xff09;、Android&#xff08;Java&#xff09;&#xff0c;原生开发效率较低&#xff0c;开发完成需要重…...

编程日记 2023/8/26 10:53:22

《基于 Vue 组件库 的 Webpack5 配置》3.将 CSS 提取到单独的文件

使用 webpack 插件 mini-css-extract-plugin 需要额外安装 npm i mini-css-extract-pluginlatest -D&#xff1b; 同时打包 js 和 css 文件时&#xff0c;可参考 entry 高级用法&#xff1b; package.json 的配置如下 const { VueLoaderPlugin } require(vue-loader); // 可…...

编程日记 2023/8/26 10:51:18

2023CCF图形学启明星计划夏令营感想记录

这篇就是纯日记了&#xff0c;想记录一下参加这个夏令营的感想&#xff0c;中间的一些过程&#xff0c;毕竟这对我来说算是一段难忘的经历。 一、了解到的渠道 我个人是比较喜欢图形渲染的&#xff0c;之前也学过GAMES的课程&#xff0c;然后偶然的一天&#xff0c;GAMES101里…...

编程日记 2023/8/26 10:50:17

如何解决“缺失msvcp110.dll”错误，msvcp110.dll丢失要怎样才能修复

今天&#xff0c;我将为大家分享关于电脑提示msvcp110.dll丢失的3种修复方法。希望这些方法能帮助到正在遇到这个问题的朋友们。 首先&#xff0c;我们来了解一下msvcp110.dll文件的作用。msvcp110.dll是Microsoft Visual C 2010 Redistributable Package的一部分&#xff0c;…...

编程日记 2023/8/26 10:49:16

激活函数总结（二十）：激活函数补充(SQNL、PLU)

激活函数总结&#xff08;二十&#xff09;&#xff1a;激活函数补充 1 引言2 激活函数2.1 Square nonlinearity (SQNL)激活函数2.2 Piecewise Linear Unit (PLU)激活函数 3. 总结 1 引言 在前面的文章中已经介绍了介绍了一系列激活函数 (Sigmoid、Tanh、ReLU、Leaky ReLU、PR…...

编程日记 2023/8/26 10:48:15

Docker【部署 04】Docker Compose下载安装及实例Milvus Docker compose(CPU)使用说明分享

Docker Compose 下载安装使用说明 1.Compose说明1.1 Overview of installing Docker Compose1.2 Installation scenarios1.2.1 Scenario one: Install Docker Desktop1.2.2 Scenario two: Install the Compose plugin1.2.3 Scenario three: Install the Compose standalone 2.C…...

编程日记 2023/8/26 10:47:14

23种设计模式-7种结构模式

结构型模式简述 把类或对象结合在一起形成一个更大的结构。 装饰器模式&#xff1a;动态的给对象添加新的功能。 代理模式&#xff1a;为其它对象提供一个代理以便控制这个对象的访问。 桥接模式&#xff1a;将抽象部分和它的实现部分分离&#xff0c;使它们都可以独立的变…...

编程日记 2023/8/26 10:46:10

大数据Flink（六十七）：SQL Table 简介及运行环境

文章目录 SQL & Table 简介及运行环境 一、​​​​​​​​​​​​​​简介 二、案例...

编程日记 2023/8/26 10:45:09

WPF使用依赖注入

现在依赖注入在.Net里面已经普及&#xff0c;自己常写一些简单的demo倒是无所谓&#xff0c;但偶尔写一点正式的工程&#xff0c;也免不了要使用一下&#xff0c;于是总结了一下在WPF里面使用依赖注入。 在写简单Demo时候&#xff0c;通常是在MainWindow的构造函数里面直接做初…...

编程日记 2023/8/26 10:44:08

玩转科技|了解AI平台桌面客户端—ChatBox

目录 前言 特性 ​编辑 为什么需要 ChatBox&#xff1f; ChatGPT Plus 平替&#xff1f; 下载 支持系统 功能图 使用教程 ​感受 展示 前言 今天小编又来了&#xff0c;推荐给大家一款开源的OpenAI API桌面客户端ChatBox&#xff0c;它支持 Windows、Mac 和 Linux。…...

编程日记 2023/8/26 10:43:06

visual studio 2022.NET Core 3.1 未显示在目标框架下拉列表中

问题描述 在Visual Studio 2022我已经安装了 .NET core 3.1 并验证可以运行 .NET core 3.1 应用程序&#xff0c;但当创建一个新项目时&#xff0c;目标框架的下拉列表只允许 .NET 6.0和7.0。而我在之前用的 Visual Studio 2019&#xff0c;可以正确地添加 .NET 核心项目。 …...

编程日记 2023/8/26 10:42:05

人工智能项目集合推荐(数据集 模型训练 C++和Android部署)

人工智能项目集合推荐(数据集 模型训练 C和Android部署) 目录 人工智能项目集合推荐(数据集 模型训练 C和Android部署) 1.三维重建项目集合 ★双目三维重建 ★结构光三维重建 2.AI CV项目集合 ★人脸检测和人体检测 ★人体姿态估计(人体关键点检测) ★头部朝向估计 …...

编程日记 2023/8/26 10:41:04

C# 服务HTTPS 对 请求被中止: 未能创建 SSL/TLS 安全通道报错

1.如果windows支持HTTPS的TLS协议&#xff0c;则可以直接跳过 &#xff08;Tls12&#xff09; [WebMethod(Description "获取HttpsPost加密服务.")] public string HTTPSPOST(String input,String sUrl) { Log.Add("ReceiveNotice", &qu…...

编程日记 2023/8/26 10:40:03

二级MySQL（七）——表格数据修改

1、修改表格中部分数据 将表格某一行的数据修改&#xff0c;这里用的UPDATE语句&#xff1a; UPDATE tb_student SET studentName 黄涛,native湖北,nation汉 WHERE studentNo 2014210103; 结果&#xff1a; 2、修改表格某一列全部数据 比如性别全部设置为‘女’ UPDATE…...

编程日记 2023/8/26 10:39:02

【日常积累】Linux下sftp搭建

概述 SFTP是Secure File Transfer Protocol的缩写&#xff0c;是安全文件传送协议。可以为传输文件提供一种安全的加密方法。跟ftp几乎语法功能一样。 SFTP是SSH的一部分&#xff0c;是一种传输档案至Blogger伺服器的安全方式。它本身没有单独的守护进程&#xff0c;必须使用s…...

编程日记 2023/8/26 10:38:01

【深入浅出C#】章节 9: C#高级主题：多线程编程和并发处理

多线程编程和并发处理的重要性和背景 在计算机科学领域&#xff0c;多线程编程和并发处理是一种关键技术&#xff0c;旨在充分利用现代计算机系统中的多核处理器和多任务能力。随着计算机硬件的发展&#xff0c;单一的中央处理单元&#xff08;CPU&#xff09;已经不再是主流&a…...

编程日记 2023/8/26 10:36:58

Windows Server服务器安全加固基线配置

一、账户管理、认证授权 一、账户 1、管理缺省账户 安全基线项说明&#xff1a;对于管理员账号&#xff0c;要求更改缺省账户名称&#xff1b;禁用Guest(来宾)账户。 操作步骤&#xff1a;进入控制面板-->管理工具-->计算机管理&#xff0c;在系统工具-->本地用户和组…...

编程日记 2023/8/26 10:35:57

基于NXP i.MX 6ULL核心板的物联网模块开发案例（4）

目录 5 4G模块测试 5.1 网络功能测试 5.2 短信功能测试 5.3 通话功能测试 5.4 GPS定位功能测试 5.5 程序编译 前言 本文主要介绍基于创龙科技TLIMX6U-EVM评估板的物联网模块开发案例，适用开发环境： Windows开发环境：Windows 7 64bit、Windows 10 64bit 虚拟机：VMware15.…...

编程日记 2023/8/26 10:34:55

宁波制作网站企业有哪些/网络营销推广是做什么的

2015中国音视频产业技术与应用趋势论坛将召开 发布时间&#xff1a;2015-10-08 13:13:04 来源&#xff1a;百姓家电网 作者&#xff1a;佚名 责任编辑&#xff1a;书海 作为我国音视频产业规模最大、级别最高的技术与应用交流盛会&#xff0c;由中国电子视像行业协会主办的201…...

编程日记 2025/2/2 0:01:43

wordpress 栏目描述/微信朋友圈推广软文

原文链接&#xff1a;http://wangneng-168.iteye.com/blog/1962238因公司需求需要研究一些关于hbase相关的知识&#xff0c;所以自己手动搭建了一下hadoop、hbase、zookeeper的相关环境&#xff0c;在网上找了许多文档总是不成功&#xff0c;不知道是我自己操作有错误还是环境有…...

编程日记 2025/2/1 22:58:57

网站服务器拒绝连接/蜗牛精灵seo

参与活动主题 《人月神话&#xff08;40周年纪念版&#xff09;再版 扒一扒你遇到过最NB开发项目》有奖活动&#xff0c;三重惊喜&#xff0c;有奖试读&作者互动关注有礼&#xff01; 为什么是《人月神话》&#xff1f; 这本书在业界真的很有名&#xff0c;几乎无人不知&am…...

编程日记 2025/2/1 20:34:10

wordpress标志/网络营销与传统营销有哪些区别

开源解决方案供应商红帽公司日前宣布&#xff0c;公司现已推出红帽虚拟化4的虚拟化平台最新版本。红帽虚拟化4为基于Linux和Windows的工作负载提供了全面开放、高性能、更安全且集中管理的平台&#xff0c;从而挑战专有虚拟化解决方案的经济性和复杂性。该款产品融合了经过更新…...

编程日记 2025/2/1 17:31:01

如何做网站/真正永久免费网站建设

一、查看Linux系统版本的命令(3种方法)1、cat /etc/issue&#xff0c;此命令也适用于所有的Linux发行版。[rootS-CentOS home]# cat /etc/issueCentOS release 6.5 (Final)Kernel \r on an \m2、cat /etc/redhat-release&#xff0c;这种方法只适合Redhat系的Linux&#xff1a;…...

编程日记 2025/2/1 16:32:12

重庆模板网站建设怎么样/网站开发公司排行榜

1.目录所示 2.在controller文件夹下创建 java文件-admin &#xff08;1&#xff09;请求登陆页 /*** 来登录页** return*/GetMapping("/")public String login() {return "login";}&#xff08;2&#xff09;post请求登陆到首页 PostMapping("inde…...

编程日记 2025/2/1 8:17:52