一行JS实现滚动到页面某个元素所在位置(类似JQ ScrollTo插件)
转自：https://www.cnblogs.com/jimaww/p/10007433.html
在实现滚动到页面指定位置时一般使用的都是JQuery的ScrollTo插件( 具体可见：ScrollTo：平滑滚动到页面指定位置 )
但是我们也可以使用几行原生js实现此功能：
打开此页面：http://www.runoob.com/try/try.php?filename=tryjsref_html_blur
那么在输入这几行代码就可以啦:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div style="height:200px;width:300px;margin:20px"></div>
<div style="height:200px;width:300px;margin:20px"></div>
<div style="height:200px;width:300px;margin:20px"></div>
<div style="height:200px;width:300px;margin:20px"></div>
<div id="greenid" style="height:200px;width:300px;margin:20px" tabindex="4"></div>
<div style="height:200px;width:300px;margin:20px"></div>
<div style="height:200px;width:300px;margin:20px"></div>
<div style="height:200px;width:300px;margin:20px"></div>
<div style="height:200px;width:300px;margin:20px"></div>
<a href="http://www.runoob.com//" tabindex="2"> runoob.com 菜鸟教程</a><br />
<a id="focusid" href="http://www.google.com/" tabindex="1">Google</a><br />
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
</body>
<script>
document.querySelector('#greenid').focus();
//document.querySelector('#focusid').focus();
</script>
原理：利用tabindex和focus，因为focus只能聚焦在input，button，a之类可聚焦的标签上，所以要给div加上tabindex使其可以被focus。
注意：如果元素已经被focus了那么再次focus不会触发滚动条滚动至此元素，记得在再次触发滚动到此focus元素之前先blur即可（demo是两个元素来回focus所以不存在这个问题）。
分类:
Javascript
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？