【前端】css 锚点定位点击之后可以触发滚动行为

这 scroll-behavior CSS 属性设置导航或 CSSOM 滚动 API 触发滚动时滚动框的行为。

请注意，任何其他滚动（例如用户执行的滚动）都不受此属性的影响。在根元素上指定此属性时，它将改为应用于视区。在 body 元素不会 not 传播到视区。 如果要整体页面滚动 需要添加到根节点html上

使用方法
scroll-behavior: auto; //锚点保持默认
scroll-behavior: smooth; //锚点滚动将触发滚动行为

<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#myBox {
				width: 100px;
				height: 150px;
				overflow: auto;
			}
			#myBox div {
				width: 100%;
				height: 150px;
			}
		</style>
	</head>
	<body >
		<p class="nav">
			滚动到：
			 <a href="#pageA">A </a>
			<a href="#pageB">B </a>
			<a href="#pageC">C </a>
	  </p>
		<div id="myBox" style="scroll-behavior: smooth;">
			<div id="pageA">1</div>
			<div id="pageB">2</div>
			<div id="pageC">3</div>
		  </div>
	</body>
</html>

兼容性
在这里插入图片描述

# 前端 # css # 开发语言
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

graphify 视频音视频转写全流程解析：从 detect 结果到知识图谱文档的 Step 2.5

graphify 的核心能力是把任意语料（代码、文档、PDF、图片）转化为可查询的知识图谱，而视频与音频文件无法被直接阅读，必须先把它们转写成文本。本文围绕 `graphify` 运行手册中的转写参考文档 [transcribe.md](https://link.gitcode.com/i/d3285781588e0f1b84886dfdbc4fe7f6)，完整讲解 "Step 2.5 - Tra

avatar 天工造物局

ML-For-Beginners 终章：经典机器学习在金融、医疗、零售等八大行业中的真实落地场景

本篇技术指南基于开源课程仓库 ML-For-Beginners 的收尾课程《Postscript: Machine learning in the real world》（对应仓库目录 [9-Real-World/1-Applications](https://link.gitcode.com/i/6b23002df80861c20abf34d7db63ef41)）编写。该课此前 11 周的教学带

avatar 天工造物局

graphify 知识图谱查询实战：query / path / explain 与可审计的答案闭环

本指南以 graphify 的 Trae 版查询技能参考（[graphify/skills/trae/references/query.md](https://link.gitcode.com/i/72a7875d46ec6d3706d31791f3cdcbe0)）为主体，系统讲解如何针对**已构建好的知识图谱**执行三类查询：语义相关节点遍历（query）、两概念间最短路径（path）、单节点关

avatar 天工造物局