用JS原生实现锚点定位功能/动态目录高亮

已于 2022-06-21 17:54:14 修改
阅读量2k 收藏 8
点赞数 1
分类专栏： 前端 笔记 文章标签： javascript 前端 开发语言
于 2022-05-30 16:03:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43684588/article/details/125048254
版权

在这里插入图片描述

<!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>
			html,
			body {
				margin: 0;
				padding: 0;
				height: 100%;
			}

			.container {
				width: 100%;
				display: flex;
				padding: 20px 50px;
				box-sizing: border-box;
			}

			.directory {
				width: 200px;
			}

			.content {
				flex: 1;
				display: flex;
				flex-direction: column;
			}

			.content h2 {
				margin: 0;
			}

			.districtName {
				width: 100%;
			}

			.container .directory ul,
			.container .directory li {
				list-style: none;
			}

			#category {
				position: sticky;
				top: 16px;
				right: 0;
			}

			#category a {
				padding: 0 16px;
				color: #2d2e2f;
				outline: none;
				text-decoration: none;
				line-height: 30px;
			}

			#category a:hover {
				background: #efefef;
			}

			#category a.active {
				background: #efefef;
				color: #1890ff;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="content">
				<div data-tab="districtName1" class="districtName">
					<h2 class="data-tab">页面一</h2>
					<section class="markdown">
						<p>按钮用于开始一个即时操作。</p>
						</h2>
						<p>标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。</p>
						<ul>
							<li>
								<p>主按钮：用于主行动点，一个操作区域只能有一个主按钮。</p>
							</li>
							<li>
								<p>默认按钮：用于没有主次之分的一组行动点。</p>
							</li>
							<li>
								<p>虚线按钮：常用于添加操作。</p>
							</li>
							<li>
								<p>文本按钮：用于最次级的行动点。</p>
							</li>
							<li>
								<p>链接按钮：一般用于链接，即导航至某位置。</p>
							</li>
						</ul>
						<p>以及四种状态属性与上面配合使用。</p>
						<ul>
							<li>
								<p>危险：删除/移动/修改权限等危险操作，一般需要二次确认。</p>
							</li>
							<li>
								<p>幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。</p>
							</li>
							<li>
								<p>禁用：行动点不可用的时候，一般需要文案解释。</p>
							</li>
							<li>
								<p>加载中：用于异步操作等待反馈的时候，也可以避免多次提交。</p>
							</li>
						</ul>
					</section>
				</div>
				<div data-tab="districtName2" class="districtName">
					<h2 class="data-tab">页面二</h2>
					<section class="markdown api-container">
						<ul>
							<li>
								<p>页面二</p>
								<p>页面二</p>
								<p>页面二</p>
								<p>页面二</p>
								<p>页面二</p>
								<p>页面二</p>
								<p>页面二</p>
								<p>页面二</p>
								<p>页面二</p>
								<p>页面二</p>
							</li>
						</ul>
					</section>
				</div>
				<div data-tab="districtName3" class=" districtName">
					<h2 class="data-tab">页面三</h2>
					<div>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
					</div>
				</div>
				<div data-tab="districtName4" class="districtName">
					<h2 class="data-tab">页面四</h2>
					<div>
						<p>页面四</p>
						<p>页面四</p>
						<p>页面四</p>
						<p>页面四</p>
						<p>页面四</p>
						<p>页面四</p>
						<p>页面四</p>
						<p>页面四</p>
						<p>页面四</p>
						<p>页面四</p>
					</div>
				</div>
				<div data-tab="districtName5" class="districtName">
					<h2 class="data-tab">页面五</h2>
					<div>
						<p>页面五</p>
						<p>页面五</p>
						<p>页面五</p>
						<p>页面五</p>
						<p>页面五</p>
						<p>页面五</p>
						<p>页面五</p>
						<p>页面五</p>
						<p>页面五</p>
						<p>页面五</p>
					</div>
				</div>
			</div>
			<div class="directory">
				<div id="category">
					<ul>
					</ul>
				</div>
			</div>
		</div>
		<div style="height: 500px; background: #eee;">

		</div>
	</body>
	<script>
		class dataScroll {
			// 声明获取名字的节点
			districtName = document.querySelectorAll('.container .districtName')
			constructor() {
				this.init()
			}
			init() {
				this.initDom() //初始化dom
				this.initScroll() //初始化监听滚动
			}
			initDom() {
				var districtName = this.districtName
				var directoryDom = document.querySelector('.directory #category ul')
				let Listdom = "";
				districtName.forEach(item => {
					let linkClass = item.querySelector(".data-tab")
					Listdom += `<li><a data-tab=${item.getAttribute('data-tab')}>${linkClass.innerHTML}</a></li>`
				})
				directoryDom.innerHTML = Listdom
				var Alist = directoryDom.querySelectorAll("li a")
				Alist.forEach(el => {
					el.addEventListener('click', function(e) {
						let aClick = e.target.getAttribute("data-tab")
						districtName.forEach(targetNode => {
							if (targetNode.getAttribute('data-tab') === e.target.getAttribute(
									"data-tab")) {
								//页面直接滚动不过度 A标签高亮
								// document.documentElement.scrollTop = targetNode.offsetTop
								// 页面动画滚动过度 A标签高亮
								targetNode.scrollIntoView({
									behavior: "smooth",
									block: "start",
									inline: "start",
								});
							}
						})
					})
				})
			}
			initScroll() {
				window.addEventListener("scroll", (e) => {
					var scroll = document.documentElement.scrollTop || document.body.scrollTop;
					var sections = this.districtName
					for (var i = sections.length - 1; i >= 0; i--) {
						if (parseInt(scroll) >= Math.ceil(sections[i].offsetTop) - 20) {
							this.activeLoadScroll(sections[i].getAttribute('data-tab'))
							return
						}
					}
				})
			}
			activeLoadScroll(sections) {
				var categoryDomA = document.querySelectorAll('.directory #category ul li a')
				categoryDomA.forEach(item => {
					if (item.getAttribute('data-tab') == sections) {
						item.className = "active"
					} else {
						item.className = ""
					}
				})
			}
		}
		new dataScroll() //初始化节点和监听滚动
	</script>

</html>
清秋挽风
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
纯js实现文章导航目录
weixin_45632692的博客
09-18 1477
我们经常看到一些内容较多的文章都有一个目录导航，点击导航会跳转到响应的位置，页面滚动时相应位置的导航也会呈现选中状态非常的方便，这里使用js做一个简单的实现 实现思路 为文章中的标题标签h1、h2添加不同的id（举例只取h1、h2其他同理） 正则获取文章内容中的h1、h2标签 使用将获取到的标签转换成li、a标签，id转换为href属性 将转换后的标签插入需要显示目录的位置 编写监测页面滚动监听...
前端-搜索高亮、字体放大及锚点定位功能
04-13
前端技术：nuxt.js elementUI 纯前端实现：搜索高亮、字体放大及锚点定位功能；
原生js实现锚点定位，tab跟随内容变化，PC/移动端均适用
nicole27ll的博客
04-13 1540
最近做到相关的业务，发现关于tab锚点定位的问题很多文章采用的方法略有差异，现在采用最直观的方式实现锚点定位，tab跟随内容变化而变化。 逻辑通了之后，在任何框架和场景下都能使用，不一定要考靠组件来完成。以下是简单实现的HTML代码，结合移动端和PC端平台不同，更改注册时间类型就可以达到一样的效果。 锚点定位效果图 一、html代码 <div class="test"> <div class="title"> &l...
实现锚点加滚动高亮功能
lxy123456qqq的博客
01-31 627
实现锚点加滚动高亮功能
【JavaScript编程】如何实现锚点定位
最新发布
猿始森林
03-30 802
在JavaScript中，锚点定位通常是指将页面的滚动条定位到某个特定的元素
js判断根据锚点显示不同的内容
iflash50的专栏
02-20 2681
无标题文档<!--function chkHash() { var hash = location.hash; hash = hash.replace(#,); if (hash != && hash != null && typeof(hash) != undefined) { alert(hash); if (document.
js vue实现动态 锚点
qq_48228724的博客
04-01 505
先拿到遍历的index值 <ul class="supply-2-wrap"> <li v-for="(item,index) in nav" @click="jump(index)" :class="{supply_2_active:Highlight==index}">{{item}}</li> </ul> 给要跳转的盒子取对应的类名 js获取窗口和body的滑动高度 jump (index) { //
【vue+a链接动态锚点】监听滚动事件，实现动态锚点。左侧菜单列表，右侧内容区，点击快速定位+滑动到对应内容区高亮对应菜单项
花椒和蕊的博客
04-21 3728
这个效果花了两天的时间，终于实现 ，可以点击快速定位，也可以滑动左侧对应高亮 主要用到a标签的动态锚点，scrollIntoView方法，监听元素的滚动事件 1、a标签的动态锚点 实现方式以我理解的如下： 通过a标签的href属性与其他元素（如div）的id相对应，给a链接加点击事件，让点击的id等于容器的id，实现“id”定位,因为用了div包裹a标签 并且for循环，所以好像不用写href属性，有key就行了。 因为项目里大量使用此功能，为了方便，所以把左侧菜单列表进行了封装，其实也可以都写在父组件中
详解Vue项目中实现锚点定位
10-17
主要介绍了Vue项目中实现锚点定位，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JS如何实现在页面上快速定位（锚点跳转问题）
10-19
本篇文章主要介绍了JS如何实现在页面上快速定位（锚点跳转问题），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android tabLayout+recyclerView实现锚点定位的示例
08-27
锚点定位是指在列表视图中实现锚点跳转的功能，即当用户滑动列表视图时，标签栏也随之更改，以便用户快速定位到特定的内容区域。本文将详细介绍如何使用 TabLayout 和 RecyclerView 实现锚点定位的示例。 TabLayout...
原生js写的一个导航菜单内容互动，锚点动画
12-28
原生js脚本写的一个html文件，内容包括导航菜单点击去锚点，还有动画效果(都是用js实现的),鼠标滚轮滑动到对应的内容，导航菜单会互动，
Android 实现锚点定位思路详解
08-27
本篇文章就使用tablayout、scrollview来实现android锚点定位的功能。通过<a> 去设置页面内锚点定位跳转。具体实现思路大家跟随脚本之家小编一起通过本文看下吧
markdown如何实现锚点功能
热门推荐
圆圆的 JavaScript 博客
01-07 1万+
最近慢慢开始写一点博客，写完一篇后发现排版上少了目录，感觉用起来不方便，那么怎么在markdown中实现目录与跳转呢？用锚点啊，嘿嘿~
js实现锚点
黑玫瑰
05-08 3001
实现效果 如下图，点击红色方框，页面会滚动到本页面的相应位置 实现步骤 html 在要跳转的位置加了一个类，我这里是nav-block-item，另外还要添加点击事件jump(1)，方法接收的参数是li的下标，也就是后面获取元素，确定要跳转到具体的哪一个“锚点”所需要用到的 <div class="nav-block-item"> <h2>基本信息</h2&...
平滑滚动到指定位置
青天诀的专栏
09-30 1874
点击按钮，页面滑动到指定位置。常见的回到顶部功能 function goTarget(target) { var timer = null; var lastPos = 0; function goMove() { var currentPosition = document.documentElement.scrollTop || document.bod...
使用js模拟锚点功能的实现
云_飞扬
12-06 6307
使用js模拟锚点功能的实现 锚点 + js 第一个div 第二个div 第三个div 第四个div 我是第一个div
js跳转到锚点(jQuery动画滚动到锚点）
11-28 543
<a name="bottom"></a> 正常网页的跳转用<a href="#bottom">跳转到锚点</a>，不同页面前面加上页面路径即可如<a href="url2.htm#bottom">跳转到锚点</a>， <!--本页--> location.hash="bottom"...
原生js模拟锚点，实现点击后，内容定位到本页的对应位置
u012329294的专栏
08-11 4450
原文地址：http://www.cnblogs.com/xiangming25/p/6078126.html 这时，如果我们使用锚点的方法就会存在一个问题，当我们点击顶部的tab部分是，     页面的url就回变成http://www.×××××.com?brandId=1&brandName=***#434   这个时候我们在点击翻页的时候，页面
vue项目使用锚点双向定位 实现滚动功能
08-30
在Vue项目中实现锚点双向定位和滚动功能可以通过以下几个步骤来实现： 1. 首先，在需要添加锚点的地方给需要定位到的元素加上一个唯一的id。例如，我们可以在需要滚动到的元素上添加类似于`<div id="section1">...</div>`的id属性。 2. 在导航栏或其他需要触发滚动的地方，使用vue-router或Vue的事件监听器等方式来监测点击事件。例如，我们可以在导航栏菜单项上添加点击事件的监听。 3. 在点击事件的处理函数中，使用`window.scrollTo`或者Vue的`$scrollTo`方法等来实现滚动到指定位置。例如，我们可以使用`window.scrollTo(0, document.getElementById("section1").offsetTop)`来实现滚动到id为"section1"的元素。 4. 在需要滚动到指定位置的元素上，使用Vue的过渡动画等方式来增强可视效果。例如，可以使用Vue的`<transition>`组件包裹需要滚动到的元素，并添加相应的动画效果。 5. 如果需要实现滚动到指定位置后更新URL地址的功能，可以使用Vue Router的`push`或`replace`方法来更新路由。例如，我们可以在点击事件的处理函数中使用`this.$router.push({path: "/example#section1"})`来实现滚动到id为"section1"的元素同时更新URL地址。 综上所述，通过以上步骤，我们可以在Vue项目中实现锚点双向定位和滚动功能。具体实现方式可以根据项目需求和实际情况进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值