HTML & JS 锚点定位的几种方式及优缺陷

最新推荐文章于 2024-04-11 08:09:38 发布

cookcyq

最新推荐文章于 2024-04-11 08:09:38 发布

阅读量2.3k

点赞数 5

分类专栏： JavaScript HTML 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/cookcyq__/article/details/122184436

版权

JavaScript 同时被 2 个专栏收录

30 篇文章 3 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

一、HTML 锚点定位

优点：
1、页面刷新依然锚点到对应位置
缺陷：
1、地址栏上会出现 #
2、没有丝滑滚动效果

第一种：绑定 id

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
</head>
<body>
<a href="#sixteen">点击</a>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1 id="sixteen">16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
</body>
</html>

第二种：绑定 name

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
</head>
<body>
<a href="#sixteen">点击</a>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<a name="sixteen">16</a>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
</body>
</html>

以上两种锚点方式效果图
在这里插入图片描述

二、JavaScript 锚点定位

优点：
1、可以结合提供 API 属性进行丝滑滚动
2、可以更细腻的控制滚动位置
缺陷：
1、页面刷新后无法保留原先滚动位置，需要增加额外代码。

第一种：借助 scrollTop & offsetTop

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
</head>
<body>
<button onclick="onTouch()">点击</button>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1 id="sixteen">16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
</body>
<script type="text/javascript">
	function onTouch() {
		const sixteen = document.getElementById('sixteen')
		// 本案例默认滚动元素是　html ，你可以根据你需要的滚动元素进行设置。
		document.documentElement.scrollTop = sixteen.offsetTop
	}
</script>
</html>

效果图
在这里插入图片描述

第二种：借助 scrollTo & offsetTop

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
</head>
<body>
<button onclick="onTouch()">点击</button>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1 id="sixteen">16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
</body>
<script type="text/javascript">
	function onTouch() {
		const sixteen = document.getElementById('sixteen')
		// 本案例默认滚动元素是　html ，你可以根据你需要的滚动元素进行设置。
		document.documentElement.scrollTo({
			top: sixteen.offsetTop,
			behavior: 'smooth' // 让滚动更丝滑
		})
	}
</script>
</html>

丝滑滚动效果图
在这里插入图片描述

第三种：借助 scrollIntoView

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
</head>
<body>
<button onclick="onTouch()">点击</button>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1 id="sixteen">16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
</body>
<script type="text/javascript">
	function onTouch() {
		const sixteen = document.getElementById('sixteen')
		sixteen.scrollIntoView({}) // 你也可以设置丝滑滚动
	}
</script>
</html>

cookcyq

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML & JS 锚点定位的几种方式及优缺陷

一、HTML 锚点定位优点：1、页面刷新依然锚点到对应位置缺陷：1、地址栏上会出现 #2、没有丝滑滚动效果第一种：绑定 id<!DOCTYPE html><html><head> <title>Test</title></head><body><a href="#sixteen">点击</a><h1>1</h1><h1>2</
复制链接

扫一扫