欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

锚点设置的几种方法(可以不改变url)

程序员文章站 2022-06-28 19:16:19
所谓锚点,就是设置同一页面的快捷点,通过点击固定在屏幕上的本页导航栏,从而迅速跳转到页面的某个位置。锚点的运用十分广泛,一般出现在某个网站的首页,或者内容较多的网页中介绍几种实现锚点的方式实现第一种 通过a标签设置锚点(会改变当前地址的路由!!!)a标签除了跳转页面以外,还可以设置锚点,通过给a标签的href属性,给对应的元素绑定同样的id值,就可以同一页面内的跳跃。对应的元素标签也可以是a标签,给a标签设置对应的name值,实现同一页面内的跳跃。上代码//快捷导航设置//a标签的hre...

所谓锚点,就是设置同一页面的快捷点,通过点击固定在屏幕上的本页导航栏,从而迅速跳转到页面的某个位置。
锚点的运用十分广泛,一般出现在某个网站的首页,或者内容较多的网页中
锚点设置的几种方法(可以不改变url)
介绍几种实现锚点的方式

实现

第一种 通过a标签设置锚点(会改变当前地址的路由!!!)
a标签除了跳转页面以外,还可以设置锚点,通过给a标签的href属性,给对应的元素绑定同样的id值,就可以同一页面内的跳跃。
对应的元素标签也可以是a标签,给a标签设置对应的name值,实现同一页面内的跳跃。
上代码

//快捷导航设置
//a标签的href属性,必须带#,点击a标签后,产生跳跃
<li><a href="#miao">去找喵星人</a></li>
<li><a href="#wang">去找汪星人</a></li>

//需要跳跃的地方
//要跳跃的地方,通过给标签绑定id属性,没有#
<h3 id="miao">喵星人基地</h3><!--设置锚点方法2-->

<p>喵喵喵~</p>

<p>喵喵喵~</p>

<p>喵喵喵~</p>

<p>喵喵喵~</p>

<p>喵喵喵~</p>

<p>喵喵喵~</p>

// 只有a标签可以设置name属性,不带# 与其他标签绑定id效果一致
<a name="wang"></a>

<p>汪汪汪~</p>

<p>汪汪汪~</p>

<p>汪汪汪~</p>

<p>汪汪汪~</p>

<p>汪汪汪~</p>

<p>汪汪汪~</p>

第二种 通过dome操作,事件控制跳转(‘跳转的位置受限,只能顶部对齐或者底部对齐,切换无动画,生硬’)
设置导航标签,绑定点击事件,在事件里,选中想要跳转的元素,执行scrollIntoView()实现页面内的跳转。

vue代码

//快捷导航
<div @click="onToYear">
	点击跳转
</div>

//想要跳转的地方
<div id="year">锚点设置</div>
  
methods: {
	onToYear: function () {
	const a = document.getElementById("year");
	a.scrollIntoView();
},
}

第三种 监听浏览器当前高度和设置跳转高度(较复杂,但更*)
通过js监听页面当前滚动条的高度,点击不同的导航标签后,通过控制浏览器的滚动条高度,实现快捷导航,展示不同内容的目的。

逻辑相比前两种方式稍微复杂一些,但更加灵活,可以*控制。

实现方式
首先设置锚点元素。 其次,在js代码中将设置的锚点元素在当前页面的高度获取到,多个锚点元素的高度用一个数组进行保存。

其次设置导航元素。每一个导航点点击之后,跳跃到对应的锚点元素的高度,之前获取的锚点元素页面高度的数组就有用了。

本文地址:https://blog.csdn.net/glorydx/article/details/107484639

相关标签: 前端逻辑基础