【JavaScript】HTML页面中取代锚点自动滑动页面的一种方式 scrollIntoView()

最新推荐文章于 2024-04-16 11:42:53 发布
最新推荐文章于 2024-04-16 11:42:53 发布
阅读量298 收藏
点赞数
分类专栏： front-end javascript 文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35714301/article/details/120860916
版权
本文介绍了JavaScript中的scrollIntoView()方法，作为HTML锚点自动滑动的替代方案。该方法允许自定义滚动行为，包括是否平滑滚动及元素的对齐方式。内容包括方法的定义、参数选项（Boolean和Object）及其详细说明，并提供了代码示例。
摘要由CSDN通过智能技术生成

HTML页面中取代锚点自动滑动页面的一种方式scrollIntoView()

文章目录


在用户界面中，经常使用锚点帮助用户跳转到页面的某个特定位置。锚点基于超链接的方式，在用户点击事件之后滑动页面。如果你觉得添加锚点和链接元素比较麻烦和不美观，可以尝试组件的 scrollIntoView()方法。

定义

element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions
最低0.47元/天 解锁文章
Fala Oviara
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5里面的scrollIntoView应用 2018.5.24
asurson的博客
05-31 696
不传参数的情况下 类似a锚点如果传参数 有2种格式 一种是布尔值 一种是对象 首先是布尔值：如果传true 元素的顶端将和其所在滚动区的可视区域的顶端对齐。若为false，元素的底端将和其所在滚动区的可视区域的底端对齐对象的话  首先ie是不支持的test.scrollIntoView({block: 'start',behavior: 'smooth'});Object型参数，这个对象有两个选项...
js scrollIntoView
王先森的博客
10-28 637
个人觉得可通过 scrollIntoView()函数实现网页返回顶部的功能； html> head> title>HTML5_ScrollInToView方法title> meta charset="utf-8"> style> #begin{ width: 100%; height: 1
HTML5用scrollIntoView()方法来规范滚动页面
赵泽清的博客
08-06 4466
HTML5用scrollIntoView()方法来规范滚动页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&am
html5 scrollintoview() 方法
weixin_41807530的博客
08-15 686
scrollintoView()  方法控制页面元素滚动。 scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。 可以传入true 或者 false  作为参数 scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。如果给该方法传入true作为参数...
HTML5_ScrollInToView方法
fengye12zjs的博客
12-08 3968
转载地址 HTML5_ScrollInToView方法 标签： scrollInToView
JavaScript获取页面中第一个锚定文本的方法
10-24
在JavaScript中，页面上的所有标签元素都会被自动存储在document.anchors数组中，该数组包含页面中所有的命名锚点元素。不过需要注意的是，现代浏览器通常不再支持name属性，而推荐使用id属性来标识锚点。 通过使用...
jQuery实现平滑滚动页面到指定锚点链接的方法
10-23
在网页设计中，平滑滚动是一种提升用户体验的重要技术，它可以使用户在点击页面内的锚点链接时，页面能够平滑地、渐进式地滚动到目标位置，而非突然跳转。jQuery库提供了一种简单易用的方式来实现这种效果。本文将...
JS如何实现在页面上快速定位（锚点跳转问题）
10-19
对于不支持上述功能的浏览器，比如旧版IE浏览器，在页面刷新时可能锚点失效的问题，可以通过JavaScript代码在页面加载完毕后检测URL中是否存在锚点。如果存在，则获取对应锚点对象，并让页面滚动到该位置。具体方法...
html中设置锚点定位的几种常见方法
09-28
在html中设置锚点定位我知道的有几种方法，使用id定位、使用name定位、使用js定位，这些方法大家可以参考下
vue添加锚点,实现滚动页面时锚点添加相应的class操作
10-14
在Vue中实现页面滚动时锚点添加相应class的操作，通常是为了增强用户体验，使得用户能够清晰地看到当前浏览的位置。以下将详细讲解实现这一功能的步骤和相关知识点。 首先，我们需要在HTML模板中设置锚点。在提供的...
全栈JavaScript之路（ 二十一）HTML5 scrollIntoView方法
王亮的专栏
07-09 4946
HTML5中，scrollIntoView()可以在所有HTML 元素上调用 通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。 如果给这个方法传入true 作为参数，或者不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视窗顶部尽可能平齐。 如果传入false 作为参数，调用元素会尽可能全部出现在视口中，（可能的话，调用元素的底部会与视窗顶部平齐。）不过顶
JavaScript 浏览器元素滚动 scrollIntoView()
jyn15159的博客
02-29 604
scrollIntoView() 方法存在于所有 HTML 元素上，可以滚动浏览器窗口或容器元素以便包含元素进入视口。
scrollTop & scrollTo & scrollIntoView html元素滚动的原生方法
qq_17335549的博客
08-16 517
的 scrollTo()方法可以使界面滚动到给定元素的指定坐标位置。有behavior参数，支持平滑顺畅的滚动属性可以获取或设置一个元素的内容垂直滚动的像素数不能平滑顺畅的滚动。
记录scrollintoview方法坑点以及替代方法
最新发布
Ghoul_780811的博客
04-16 826
在每次滚动时获取到进行步骤的dom元素调用该方法即可自行滚动到视口中心, 但是随着项目需求增加 有两个步骤条组件时,该方法出现bug,因前端与后端通信采用http,后端会在短时间多次推送更新,在短时间多次推送时,发现。项目需求: 需要在一个不能完全展示有滚动条的步骤条组件中,在每一次更新时将正在进行的步骤聚焦在滚动条的视口中心位置。该方法会在多次调用后,后续的调用覆盖上一次的调用导致滚动被覆盖,无法完全滚动到中心位置,因此有了第二种替代方法。完美解决无法多次触发bug。
scrollIntoView使用教程：让页面滚动到指定元素的可见区域
热门推荐
每天都要努力学习哦~~
07-05 1万+
scrollIntoView是一个DOM元素的方法，它可以将当前元素滚动到浏览器窗口的可见区域内。该方法有一些可选参数，可以用来控制滚动的行为。总结一下，scrollIntoView是一个非常实用的JavaScript方法，可以帮助我们实现页面滚动的交互效果。它可以在点击事件或其他交互事件中调用，将指定的元素滚动到浏览器窗口的可视区域内。除了基本的滚动功能，scrollIntoView方法还支持一些配置选项，可以实现平滑滚动和对齐方式的调整。希望本文对你理解和使用scrollIntoView方法有所帮助。
网页锚点功能实现＜a＞标签和scrollIntoView()方法
weixin_40381947的博客
10-28 2200
因此我们可以通过获取标签dom元素(可以使用除标签之外的任意标签)，添加点击事件，使用scrollIntoView(true)来实现a标签的锚点功能，这个方法可以完美的替代标签的锚点。具体做法是，在滚动到DOM元素时，先将该元素的父元素的scroll-behavior属性设置为smooth，然后再将该元素的scrollIntoView方法调用。当用户点击带有锚点的链接时，页面会滚动到目标元素的位置，并将该元素置于视口的顶部或底部，具体取决于浏览器、操作系统和用户的首选项。
scrollIntoView 失效调研与替换方案
suedar的小屋子
06-11 3672
问题背景 今天需要做一个点击icon滑动到文章评论区的功能，采用了scrollIntoView，发现在移动端偶现失效了。 代码如下： commentRef.current.scrollIntoView({ behavior: 'smooth', }); 分析 思考1 是否由于浏览器bug导致 据这篇博文描述是由于滑动过程中进行了原生事件的监听就会阻断事件继续执行。 因此替换成 scollTo，发现滑动有改善，但是还是有定位不准的问题。 根据这个回答得出可以采用 requestAnimatio
scrollIntoView使用与属性详解
Bunny的博客
10-16 402
如果要想让元素滚动到指定位置。
html页面滚动条滚动到指定内容位置
weixin_42884605的博客
11-03 1288
锚点定位？进入页面某个元素需要出现在可视区？......
Vue3+ts 跳转页面 定位到某个位置 scrollIntoView 锚点滚动
03-28
可以通过以下方式在 Vue3 中实现跳转页面并定位到某个位置的滚动效果： 1. 在目标位置添加一个具有唯一标识的元素（例如 `<div id="target"></div>`），作为锚点。 2. 在跳转页面的组件中，引入 `ref` 和 `onMounted`，并使用 `scrollIntoView` 方法实现滚动： ```typescript <template> <div ref="target" id="target">目标位置</div> <button @click="scrollToTarget">跳转到目标位置</button> </template> <script lang="ts"> import { defineComponent, onMounted, ref } from 'vue' export default defineComponent({ setup() { const targetRef = ref(null) const scrollToTarget = () => { targetRef.value?.scrollIntoView({ behavior: 'smooth' }) } onMounted(() => { if (location.hash === '#target') { scrollToTarget() } }) return { targetRef, scrollToTarget, } }, }) </script> ``` 在 `onMounted` 钩子函数中判断当前页面是否包含 `#target` 锚点，如果有则执行 `scrollToTarget` 方法，实现自动滚动到目标位置的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值