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

使用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。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/52932.shtml

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

相关文章

Spring 与【MyBatis 】和【 pageHelper分页插件 】整合

目录 一、Spring整合MyBatis 1. 导入pom依赖 2. 利用mybatis逆向工程生成模型层层代码 3. 编写配置文件 4. 注解式开发 5. 编写Junit测试类 二、AOP整合pageHelper分页插件 1. 创建一个AOP切面 2. Around("execution(* *..*xxx.*xxx(..))") 表达式解析 3. 编…

【案例教程】高分论文密码:大尺度空间模拟预测与数字制图

尺度空间模拟预测和数字制图技术和不确定性分析广泛应用于高分SCI论文之中&#xff0c;号称高分论文密码。大尺度模拟技术可以从不同时空尺度阐明农业生态环境领域的内在机理和时空变化规律&#xff0c;又可以为复杂的机理过程模型大尺度模拟提供技术基础。在本次培训中&#x…

Rust安全之数值

文章目录 数值溢出 数值溢出 编译通过,运行失败 cargo run 1 fn main() {let mut arg std::env::args().skip(1).map(|x| x.parse::<i32>().unwrap()).next().unwrap();let m_i i32::MAX - 1;let a m_i arg;println!("{:?}", a); }thread main panicked…

Netty核心源码解析(三)--NioEventLoop

NioEventLoop介绍 NioEventLoop继承SingleThreadEventLoop,核心是一个单例线程池,可以理解为单线程,这也是Netty解决线程并发问题的最根本思路--同一个channel连接上的IO事件只由一个线程来处理,NioEventLoop中的单例线程池轮询事件队列,有新的IO事件或者用户提交的task时便执…

2023谷歌开发者大会直播大纲「初稿」

听人劝、吃饱饭,奉劝各位小伙伴,不要订阅该文所属专栏。 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 跨域学习者,从事过全栈研发、产品经理等工作,现任研发部门 CTO 。荣誉:2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师,“星荐官共赢计…

【java】【idea2023版】Springboot模块没有.iml文件的问题

目录 方法一&#xff1a; 1、首先鼠标选中对应的对应的模块 &#xff0c;按两下Ctrl键 2、project中选择对应的模块 3、运行mvn idea:module 命令​编辑 方法二&#xff1a; 1、可以右键点击open Terminal 2、然后在打开的Terminal里输入 方法一&#xff1a; 1、首先鼠…

【Rust】Rust学习 第十八章模式用来匹配值的结构

模式是 Rust 中特殊的语法&#xff0c;它用来匹配类型中的结构&#xff0c;无论类型是简单还是复杂。结合使用模式和 match 表达式以及其他结构可以提供更多对程序控制流的支配权。模式由如下一些内容组合而成&#xff1a; 字面值解构的数组、枚举、结构体或者元组变量通配符占…

leetcode做题笔记99. 恢复二叉搜索树

给你二叉搜索树的根节点 root &#xff0c;该树中的 恰好 两个节点的值被错误地交换。请在不改变其结构的情况下&#xff0c;恢复这棵树 。 思路一&#xff1a;模拟题意 int midOrder(struct TreeNode **pre, struct TreeNode **err1, struct TreeNode **err2, struct TreeNo…

python VTK PyQt5 VTK环境搭建 创建 渲染窗口及三维模型,包含 三维模型交互;

目录 Part1. VTK 介绍 Part2. PyQt5 VTK环境搭建 安装Anaconda 自带Python Anaconda下载 安装PyQt5 安装 VTK Part3 :PyQt VTK 结合样例: Part1. VTK 介绍 VTK&#xff08;visualization toolkit&#xff09;是一个开源的免费软件系统&#xff0c;主要用于三维计算机图形…

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…

数字孪生赋能工业制造,为制造业带来新机遇与挑战

数字孪生技术是利用模拟仿真技术将实体对象数字化的技术。它基于虚拟现实、人工智能和云计算等技术&#xff0c;能够创建与真实物体相同的数字模型&#xff0c;并通过实时监测和分析手段&#xff0c;为制造企业提供关于该物体的全面数据&#xff0c;从而优化产品开发和生产过程…

Python如何操作网络爬虫

Python是一种非常强大的编程语言&#xff0c;用于网络爬虫操作也非常方便。Python提供了许多用于构建和操作网络爬虫的库和工具&#xff0c;如BeautifulSoup、Scrapy、Requests等。本文将详细介绍Python如何操作网络爬虫。 一、安装相关库 首先&#xff0c;我们需要安装Python…

几个nlp的小任务(序列标注)

几个nlp的小任务(序列标注) 安装一个 评估的库序列标注的介绍初始化参数加载数据集查看数据集编码选出示例展示数据预处理类,转token判断是否为 transformers.PreTrainedTokenizerFast类型继续分割word介绍对齐解决对齐对数据集进行批量预处理微调预处理模型设置 参数args使…

数据结构双向链表

Hello&#xff0c;好久不见&#xff0c;今天我们讲链表的双向链表&#xff0c;这是一个很厉害的链表&#xff0c;带头双向且循环&#xff0c;学了这个链表&#xff0c;你会发现顺序表的头插头删不再是一个麻烦问题&#xff0c;单链表的尾插尾删也变得简单起来了&#xff0c;那废…

jvm——内存模型

1.java内存模型 1.1 原子性 1.2 问题分析 这里与局部变量自增不同&#xff0c;局部变量调用iinc是在局部变量表槽位上进行自增。 静态变量是在操作数栈自增。 这里的主内存和工作内存时再JMM里的说法。 因为操作系统是时间片切换的多个线程轮流使用CPU. 1.3解决方法 JMM中…

【uniapp 监听键盘弹起与收回】

在uniapp中&#xff0c;可以通过使用小程序提供的API来监听键盘弹起与收回。 首先&#xff0c;在页面的onLoad函数中注册监听事件&#xff1a; onLoad() {uni.onKeyboardHeightChange(this.onKeyboardHeightChange); },然后&#xff0c;在页面的onUnload函数中取消注册监听事…

Kotlin 协程

Kotlin 协程&#xff08;Coroutines&#xff09;是一种轻量级的并发编程解决方案&#xff0c;旨在简化异步操作和多线程编程。它提供了一种顺序和非阻塞的方式来处理并发任务&#xff0c;使得代码可以更加简洁和易于理解。Kotlin 协程通过提供一套高级 API&#xff0c;使并发代…

C#矩阵XY排序

矩阵XY快速排序 using MyVision.Script.Method;public class MyScript : ScriptMethods {//struct MOTIONPOSXY_S{public double Pos_x;public double Pos_y;};//脚本执行该方法public bool Process(){//try{//脚本代码写在下方 List<double> PointX GetDoubleList(&qu…

Tensor-动手学深度学习-李沐_笔记

介绍 Tensor&#xff0c;又称"张量"&#xff0c;其实就是n维度数组。不同维度的Tensor示意图如下&#xff1a; 关于Tensor.reshape reshape函数可以处理总元素个数相同的任何新形状&#xff0c;【3&#xff0c;2&#xff0c;5】->【3&#xff0c;10】->【5&a…

GIT——.gitignore文件

git 提交时忽略的文件 HELP.md target/ .mvn/wrapper/maven-wrapper.jar **/src/main/**/target/ **/src/test/**/target/ logs/### STS ### .apt_generated .classpath .factorypath .project .settings .springBeans .sts4-cache### IntelliJ IDEA ### .idea *.iws *.iml *.i…