a 标签锚点定位不改变url

最新推荐文章于 2023-03-28 16:02:41 发布

原创最新推荐文章于 2023-03-28 16:02:41 发布 · 2.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html5

大前端专栏收录该内容

88 篇文章

订阅专栏

本文深入讲解了网页中锚点定位的使用方法，包括如何在当前页面内进行跳转，以及如何通过锚点链接到其他页面的指定位置。同时介绍了不改变URL的锚点定位技巧。

描点定位，让页面跳转到的位置，就是锚点。锚点是一种超链接，只不过它是页面内部的超链接，它指向页面特定的部分。是利用 a 标签的herf属性，绑定到元素的id上面，

组成：锚记、指向锚记的链接

// 当前页面的锚点

<a href="#Id">到目标位置</a>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div id="Id">111</div>

// 跳转页面的锚点

// 页面一的内容
<a href="index2.html#indexPage" target="_blank">定位到其他页面</a>


// 页面二的内容
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="indexPage">页面二</div>

// 当前页面不改变url 的方法


	// html

	 <a class="btn btn-total" @click="anchorPoint('#anchorId')">锚点</a>


	// js

	 anchorPoint(idName){
        document.querySelector(idName).scrollIntoView(true);
     }