整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
为啥没有早点知道scrollIntoView！！！
### 引言
身为一名Web前端开发者，你是否曾陷入过滚动页面寻找某个特定元素的困境？亦或是想要精准定位某元素在视窗中央却苦于找不到合适的解决方案？今天，我们要向你揭示一个鲜为人知却又极其实用的Web API——`scrollIntoView`，它可以帮助我们在页面中轻松定位任何元素，实现流畅自然的滚动效果。这篇文章将深度剖析`scrollIntoView`的用法及其背后的原理，从此，你再也不必为页面滚动问题而烦恼！
### 一、scrollIntoView的基本用法
**1.1 scrollIntoView是什么？**
`scrollIntoView`是DOM元素的一个原生方法，它可以让指定元素滚动到视窗可见区域，也就是让目标元素尽可能地出现在浏览器窗口的可视范围内。
```html
<button id="scroll-to-me">点击我，让我进入视野</button>
<script>
const button=document.querySelector('#scroll-to-me');
button.addEventListener('click', ()=> {
button.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
});
</script>
```
**1.2 参数详解**
- `behavior`: 可选参数，决定滚动动画的速度，可设为`'auto'`（默认，无动画）或`'smooth'`（平滑滚动）。
- `block`: 指定垂直滚动方式，可选值有`'start'`、`'center'`、`'end'`、`'nearest'`。默认值为`'auto'`，根据元素的位置自动选择最佳滚动位置。
- `inline`: 指定水平滚动方式，用法同`block`参数。
### 二、scrollIntoView的实际应用场景
**2.1 页面内的锚点导航**
```html
<a href="#section2">跳转到第二部分</a>
<div id="section1">...</div>
<div id="section2">这里是第二部分</div>
<script>
window.onload=()=> {
const hash=window.location.hash;
const targetElement=document.querySelector(hash);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth' });
}
};
</script>
```
**2.2 自动滚动表单中的错误字段**
```html
<form>
<input type="text" id="field1" required>
<input type="text" id="field2" required>
<!-- 其他字段... -->
<button type="submit" id="submit-btn">提交</button>
</form>
<script>
const form=document.querySelector('form');
const submitBtn=document.querySelector('#submit-btn');
form.addEventListener('submit', (event)=> {
event.preventDefault();
let firstInvalidField=form.querySelector(':invalid');
if (firstInvalidField) {
firstInvalidField.scrollIntoView({ behavior: 'smooth' });
}
});
</script>
```
### 三、高级用法与注意事项
**3.1 平滑滚动与性能优化**
使用`behavior: 'smooth'`时，浏览器会创建一个平滑滚动动画，这可能导致CPU占用较高，特别是在移动端。因此，应合理评估滚动动画对用户体验和性能的影响。
**3.2 浏览器兼容性**
`scrollIntoView`的选项参数在某些老版本浏览器中可能不受支持，因此在实际使用时需注意浏览器兼容性，必要时可通过polyfill库或条件判断来提供备选方案。
### 结语
`scrollIntoView`这个隐藏的宝藏API无疑为Web开发者提供了极大便利，无论是实现页面内部的锚点导航，还是聚焦表单错误提示，它都能轻松应对。下次当你面临页面滚动难题时，不妨试试`scrollIntoView`，相信它会让你感叹：“为啥没有早点知道scrollIntoView！”如今，就让我们一起拥抱这个强大的API，为用户创造更流畅、更友好的浏览体验吧！
有时候，我们想阅读页面中某段精彩的内容，但由于页面太长，用户需要自己滚动页面，查找起来非常麻烦 ，很容易让人失去继续往下阅读的兴趣。这样体验非常不好，所以我们可以想办法 实现点击某段文字或者图片跳转到页面指定位置，方便用户的阅读。
这里作为锚点的标签可以是任意元素。
<a href="#aa">跳转到 id 为 aa 标记的锚点</a>
<p>-------------分隔线-------------</p>
<div id="aa">a</div>
这里作为锚点的标签只能是 a 标签。
<a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
<p>-------------分隔线-------------</p>
<a name="bb">name 为 bb 的 a 标签的锚点</a>
<div id="abb">bbb</div>
注意：当以 ' a 标签 name 属性作为锚点 ' 和 ' 利用 id 为标记的锚点 ' 同时出现（即以 name 为锚点和以 id 为锚点名字相同时），会将后者作为锚点。
window.scrollTo 滚动到文档中的某个坐标。可提供滑动效果，想具体了解 scrollTo() 可以看看 MDN 中的介绍。
话不多说，看下面代码
「html 部分」:
<a id="linkc">平滑滚动到 c</a>
<p>-------------分隔线-------------</p>
<div id="cc">c</div>
「js 部分」:
var linkc = document.querySelector('#linkc')
var cc = document.querySelector('#cc')
function to(toEl) {
// toEl 为指定跳转到该位置的DOM节点
let bridge = toEl;
let body = document.body;
let height = 0;
// 计算该 DOM 节点到 body 顶部距离
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
// 滚动到指定位置
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。想具体了解 scrollIntoView() 可以看看 MDN 中的介绍。
下面也直接上代码
「html 部分」:
<a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
<p>-------------分隔线-------------</p>
<div id="dd">ddd</div>
「js 部分」:
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
注意：此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
下面为了方便看效果，把上面的代码整理在一起。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<a href="#aa">跳转到以 id 为 aa 标记的锚点 a</a>
<p>-------------分隔线-------------</p>
<a name="aa">hhh</a>
<div id="aa">aa</div>
<a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
<p>-------------分隔线-------------</p>
<a name="bb">name 为 bb 的 a 标签的锚点</a>
<p>-------------分隔线-------------</p>
<div>bb</div>
<a id="linkc">平滑滚动到 c</a>
<p>-------------分隔线-------------</p>
<div id="cc">cc</div>
<a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
<p>-------------分隔线-------------</p>
<div id="dd">dd</div>
<p>-------------分隔线-------------</p>
<div></div>
</body>
<script>
var cc = document.querySelector('#cc')
var linkc = document.querySelector('#linkc')
function to(toEl) {
//ele为指定跳转到该位置的DOM节点
let bridge = toEl;
let body = document.body;
let height = 0;
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
console.log(height)
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
</script>
<script>
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
</script>
</html>
效果图：
你是否遇到过类似的需求：需要在页面中实现锚点定位，确保进入页面时某个元素能够出现在可视区域内？点击列表某个元素自动滚动到视图中间？这类需求涉及处理元素与可视区域之间的关系，比如使用 scrollTop、scroll、监听滚动等方式实现。
今天发现一种最简单的方式：scrollIntoView，
scrollIntoView() 方法会滚动元素的父容器，使元素出现在可视区域
scss复制代码// 默认为scrollIntoView(true)
element.scrollIntoView()
// alignToTop 布尔值 可选
element.scrollIntoView(alignToTop)
element.scrollIntoView(scrollIntoViewOptions)属性都是可选
定义滚动效果，值必须以下之一：
定义垂直方向的对齐，start、center、end 或 nearest 之一。默认为 start。
定义水平方向的对齐，start、center、end 或 nearest 之一。默认为 nearest（最近展示）。
默认效果：
作者：Bellet
链接：https://juejin.cn/post/7343243882027941903
*请认真填写需求信息，我们会在24小时内与您取得联系。
