`
阅读更多

【前言】

    本文简单说下锚点跳转优先级

 

 

【主体】

    使用锚点跳转是常用的一种方式,例如返回顶部或者快速跳转书签目录等。分为3种

(1)name值

     a 标签 name 属性值为 top(可变)

<!-- 定义一个名称为top的锚点链接 -->
<a name="top"></a>

<!--主体代码-->

<!--返回页面顶部top锚点的链接-->
<a href="#top">返回顶部</a>

 

(2)id值

    a标签的 id 值为top(可变)

<!-- 定义一个名称为top的锚点链接 -->
<a id="top"></a>

<!--主体代码-->

<a href="#top">返回顶部</a>

 

(3)默认值

    新版本的浏览器(chrome等)默认支持 #top 锚点返回顶部且不需要前面所提条件,但是前面条件的优先级大于默认跳转

<!--主体代码-->

<a href="#top">返回顶部</a>

 

(4)下面说下优先级,这个是关键,避免无意中犯了错误却无从下手

    注意:

id > name > 默认

    不建议大家用默认的方式,具体有兼容问题和优先级低的问题,id 与 name 均可,但要注意命名冲突

 

.

分享到:
评论

相关推荐

    JS如何实现在页面上快速定位(锚点跳转问题)

    JS实现页面快速定位的技术主要涉及锚点跳转的概念和应用。锚点,也被称作片段标识符,其作用是允许用户点击链接后页面能够跳转到特定的位置。在网页设计中,尤其是在内容较多、页面较长的情况下,合理使用锚点可以...

    html页面锚点跳转

    html页面锚点跳转

    微信小程序 scroll-view 实现锚点跳转功能

    在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用&lt;scroll&gt; 的 scroll-into-view 属性。  实现锚点跳转主要以下几点:  1、最外层容器使用 scroll-view  2、...

    未正确配置NSA PCC锚点优先级导致终端无法占用NR锚点问题.docx

    标题涉及的知识点主要集中在“未正确配置NSA PCC锚点优先级”导致的问题,以及如何解决这个问题。在5G网络中,非独立组网(NSA)是初期部署的一个重要选项,它依赖于4G(LTE)网络作为控制面的锚点。PCC(Packet ...

    未正确配置NSA-PCC锚点优先级导致终端无法占用NR锚点问题.pdf

    标题所述的问题是关于5G网络中的非独立组网(NSA)模式下的分组核心网(PCC)锚点优先级配置不正确,导致终端无法有效占用新的无线接入技术(NR)锚点站。这个问题主要出现在北京地铁5G网络的建设中,具体表现为终端在站台...

    线程导航+锚点跳转,点击锚点跳转到对应位置

    在网页开发中,"线程导航+锚点跳转"是一种常见的交互设计,它结合了JavaScript(js)技术,使得用户可以通过点击特定的链接(锚点)快速定位到页面的指定部分。这种功能极大地提升了用户体验,特别是在内容丰富的长...

    JS锚点平滑跳转

    JavaScript 锚点平滑跳转是一种在网页中实现页面内部导航时提供平滑过渡效果的技术。传统的HTML锚点链接可以直接跳转到页面内的某个特定位置,但这种跳转通常是瞬间完成,缺乏用户体验上的平滑性。JS锚点平滑跳转则...

    未正确配置NSA-PCC锚点优先级导致终端无法占用NR锚点问题.docx

    标题提及的问题是关于“未正确配置NSA-PCC锚点优先级导致终端无法占用NR锚点”,这涉及到5G非独立组网(NSA)与4G长期演进(LTE)之间的互操作,特别是接入性问题。在此场景下,NR(New Radio)是5G的新无线接口,而...

    未正确配置NSA PCC锚点优先级导致终端无法占用NR锚点问题.pdf

    标题提及的问题是“未正确配置NSA PCC锚点优先级导致终端无法占用NR锚点问题”,这主要涉及到4G到5G NSA(Non-Standalone)网络架构中的切换和接入策略。NSA模式下,5G NR(New Radio)网络依赖4G LTE作为控制面的...

    js导航栏A标签锚点跳转

    "js导航栏A标签锚点跳转"是JavaScript在网页交互中的常见应用,主要用于实现页面内部链接的平滑滚动效果。这个话题涉及到的知识点包括HTML锚点、JavaScript事件处理和DOM操作。 首先,HTML锚点(#标识符)允许我们...

    jQuery汽车品牌按字母锚点跳转特效源码.zip

    该压缩包文件“jQuery汽车品牌按字母锚点跳转特效源码.zip”包含了一个使用jQuery实现的特定功能:汽车品牌按字母锚点跳转特效。这个功能通常用于汽车相关网站,便于用户按照首字母快速浏览不同的汽车品牌。下面将...

    浅谈vue 锚点指令v-anchor的使用

    // 如果绑定的值为0,则total也为0,表示不需要进行跳转 if(binding.value == 0){ total = 0; } else { // 否则,计算目标元素相对于文档顶部的偏移量 total = document.getElementById(`anchor-${binding....

    微信小程序实现超链接锚点跳转

    在微信小程序中,实现超链接锚点跳转是一项常见的需求,尤其在构建具有多层级页面或者需要快速定位到页面特定位置的应用中。本篇将详细讲解如何在微信小程序环境中运用超级链接(超链接)和锚点(Anchor)来实现这一...

    使用JS模拟锚点跳转的实例

    在本篇文档中,我们将探讨如何使用JavaScript(简称JS)来模拟这种锚点跳转行为。 首先,HTML锚点定义通常在页面内的某个元素上设置id属性。例如,如果我们想要标记页面上的某个特定位置,就可以为该元素指定一个id...

    jquery锚点带动画跳转

    本文将深入探讨如何使用jQuery实现锚点带动画跳转,并分享相关的知识点。 一、jQuery锚点基本概念 1. 锚点链接:在HTML中,我们通过`&lt;a&gt;`标签的`href`属性设置为`#idName`来创建一个锚点链接,其中`idName`是目标...

    jQuery锚点动画跳转顶部效果

    jquery锚点带动画跳转返回顶部特效,可定位到网页的相应模块,多种方式回到网页顶部效果,第一种方式是最初打开页面的时候,点击最上边的导航按钮,可进入本页面相应的区域。第二种方式是,拖动滚动条之后,网页右侧...

    jquery 仿锚点跳转到页面指定位置的实例

    在网页设计中,锚点链接(Anchor Link)是一种常见的功能,它允许用户通过点击链接直接跳转到页面内的特定位置。然而,在某些情况下,我们可能需要实现类似锚点跳转的功能,但不依赖HTML的锚点标记。这时,我们可以...

    jQuery锚点带动画跳转特效.zip

    《jQuery锚点带动画跳转特效的实现与应用》 jQuery锚点带动画跳转特效是一种常见的网页交互设计,它能够使用户在页面内点击链接时,不仅快速定位到相应内容,还能配合动画效果,提升浏览体验。尤其在购物商城网站、...

Global site tag (gtag.js) - Google Analytics