如何避免在点击带ID的锚点时跳到顶部 - 腾讯云开发者社区

文章/答案/技术大牛

发布

【第012期】如何设置页面锚点

不知道大家有没有注意到，在我们上网的时候，会看到有些链接打开之后可以直接定位到页面的某个位置处。早在第二期，我们就介绍了链接元素，那么这一期我们就来说说页面中的锚点。...如何设置页面锚点这在活动类的页面上最常用，整个页面可能是一个超大的卖场，页面的每一段作为一个“楼层”，类似盖楼的感觉，然后页面的顶部或侧面有一组可以切换的选项，点击就会跳到不同的楼层： ?...然后在同一个文档中使用普通的链接元素，就可以跳到这个位置了： ? 这种方式的关键点就是，首先用带 name 的 a 确定位置，然后用带 # 的地址跳过去即可。...当然，你还可以用锚点跳到某个网页的指定位置，比如下面的链接就会跳到页面的第二处位置： http://st.midea.com/act/score/index_pc.html#a2 正常情况下，页面跳到每个锚点时都会自动把当前位置拉到窗口最顶部...还有一种比较常见的情况，就是页面中靠下的几个锚点，跳过去的时候可能不会自动滚到页面的顶部。这是因为页面的长度可能已经到头了，页面的底部不会自动拉出空白，锚点被页面底部“拽”住了。

2.5K3 0

hash实现锚点平滑滚动定位

锚点锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样，是一种页面内的超级链接二、锚点简单的栗子 <!...解析访问该页面的地址:http://127.0.0.1/anchor.html(我是在本地服务器上测试的) 点击a链接锚点1，则页面会直接跳到红色的div(锚点1)，同时，浏览器地址改变为http...scrollToAnchor(); }; // 监听地址栏url的hash值改变时，检查是否需要定位锚点 window.onhashchange = function(){ scrollToAnchor...anchor = getAnchor(hash), // 获取伪锚点的id anchorDom, // 伪锚点dom对象 anchorScrollTop; // 伪锚点距离页面顶部的距离...// 伪锚点距离页面顶部的距离 // 如果不存在伪锚点,则直接结束 if(anchor.length < 1){ return;

9.3K4 1

您找到你想要的搜索结果了吗？

是的

没有找到

React项目中如何实现一个简单的锚点目录定位

前言锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节如何在React中实现锚点定位和平滑滚动目录自动高亮的实现思路处理顶部导航遮挡锚点的解决方案服务端渲染下的实现方案...对于锚点定位来说,主要涉及这两个部分: 设置锚点,为页面中的某个组件添加id属性点击链接,跳转到指定锚点处例如: // 锚点组件 function AnchorComponent() {...此时就需要实现锚点定位和目录的联动效果: 点击目录时,自动滚动到对应的章节滚动页面时,自动高亮正在浏览的章节目录导航组件目录导航本身是一个静态组件,我们通过props传入章节数据: function...但是在Next.js的SSR环境下就会有问题: 点击目录链接时,页面不会滚动。这是因为在服务端,我们无法获取组件的ref,所以锚点元素不存在,自然无法定位。滚动页面时,目录高亮也失效。...这样我们就可以在点击目录链接时,正确滚动到对应的章节位置了。数据注水但是点击目录只解决了一半问题,滚动高亮还需要解决。这里就需要用到数据注水的技术。

1.9K2 0

HTML4基础知识与排版技巧全面指南

target ：控制跳转时如何打开页面，常用值如下：_self ：在本窗口打开_blank：在新窗口打开id ：元素的唯一标识，可用于设置锚点。name ：元素的名字，写在 a 标签中，也能设置锚点。...-- 第二种方式：其他标签配合id属性 --> id="test2">我是一个位置 // 2.跳转锚点锚点--> 去test1锚点跳到本页面顶部 --> 回到顶部的 a 标签是超链接，具有 name 属性的 a 标签是锚点。2. name 和 id 都是区分大小写的，且 id 最好别是数字开头。唤起指定应用点击标签文字获取焦点。方式：设置 label 的 for 属性的值等于控件的 id。将控件嵌套在 label 标签内。

1610 0

HTML中的超链接

一般效果是我们点击网页上某个地方，网页会自动跳转到另外一个地方。...三、ftp 链接进入四、邮箱链接 E-MAIL 最后重点说一下瞄点链接...：一般是点击之后跳到网页的一个地方。...比如淘宝网站页面上的《返回到顶部》这个链接　　定义锚点：锚点名称”>… 　　链接点：锚点名称”>… 当然，我们还可以到别的页面：定义瞄点：锚点名称”>… 链接锚点：锚点名称”>…

5.2K5 0

navigateTo:fail page pagesgoodsDetailsjavascript:void(0); is not found

在vue.js项目转化到mpvue的小程序项目的过程中，执行事件时，报了如下图所示的错误: ?...purchase" @click="selectColor('1')"> 立即购买原因是:用a标签时，...用到了href="javascript:void(0);"，在vue.js有路由进行跳转，href="javascript:void(0);"这种写法代表禁止超链接跳到另一个地址，但是在mpvue中，可用...=”#"的区别点击点击链接后不会回到网页顶部点击点击后会回到网面顶部 "＃"其实是包含了位置信息，...例如默认的锚点是＃top 也就是网页的上端而javascript:void(0) 仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首而javascript:void(

1K2 0

Flutter 双向聊天列表效果进阶优化

聊天列表是一个很扣细节的场景，在之前的《Flutter 实现完美的双向聊天列表效果，滑动列表的知识点》里，通过 CustomScrollView 和配置它的 center 从而解决了数据更新时的列表跳动问题...，我们把锚点给了 SliverPadding ，而因为列表是 reverse，所以起始位置是在屏幕下方；红色的 old 数据 SliverList ，在代码里是处于 center 的下方，而因为 reverse...结合这个问题，这里可以发现关键的点就在于 reverse ，而对比微信和QQ的聊天列表需求，在没有数据时，消息数据应该是从顶部开始，所以这时候就需要我们调整列表实现，参考微信/QQ 的实现模式。...image 如下图所示，调整后从结构上变成了右边的逻辑：数据起始锚点在页面顶部，所以不会存在顶部留空问题；在 center 下面的 SliverList 按照正向排序正常显示，用于显示新数据；在...，例如下图所示，针对列表是否处于底部，在接收到新数据时是直接跳到最新数据，还是弹出提示用让用户点击跳转。

7794 0

HTML 锚点三种实现方法

在网页中经常用到锚点，特别是在比较长的页面中锚点的使用会增加用户体验。下面介绍下锚点三种实现方法： 1....在同一页面中或者 id="add"> 跳转到add （ps：用id兼容性好些） 2....在不同页面中锚点定位在a.html中，从另外一个页面的链接跳转到这个锚点跳转到a.add 3....点击链接触发js事件，同时跳转到锚点，有两种处理方式：第一种：触发add函数并跳转到add锚点第二种： id="pNode...参数为true时调用该函数，页面（或容器）发生滚动，使element的顶部与视图（容器）顶部对齐；参数为false时，使element的底部与视图（容器）底部对齐。

3.9K3 0

API 23 widget.RelativeLayout.LayoutParams——属性分析

android:layout_alignWithParentIfMissing 属性说明：如果设置为true，则当无法找到layout_toLeftOf，layout_toRightOf等的锚点时，父对象将用作锚点...对应的全局属性资源符号是layout_alignWithParentIfMissing。是否使用父做备用锚点。...android:layout_toLeftOf 属性说明：将此视图的右边缘定位到给定锚视图ID的左侧。在…的左侧。...对应的全局属性资源符号是layout_above。 android：layout_below 属性说明：将此视图的顶部边缘定位在给定锚视图ID下方。在…的下方。...对应的全局属性资源符号是layout_alignBaseline。 android：layout_alignTop 属性说明：使此视图的顶部边缘与给定锚视图ID的顶部边缘相匹配。对齐…的顶部。

7562 0

我们应该知道的标签

2、电子邮件链接内容 3、返回页面顶部空链接返回顶部注意：设置超链接时，如果不确定要链接到哪个位置处时...，请使用#，因为 href="",会刷新页面，而href="#",还在这个页面，默认回到最顶部 4、锚点作用在页面中的某行位置处，做一个记号，方便页面能够随时跳转到记号位置处使用方式...定义锚点 1、通过 a 标记的 name 属性定义锚点内容 2、通过任意标记的 id 属性定义锚点 id="名称"> 链接到锚点...1、跳转到本页的锚点处锚点名称">内容 2、跳转到其他页锚点处锚点名称">内容 5、链接到JS 点击时，void(0) 计算为 0， Javascript 上没有任何效果，不会发生跳转。

1.8K1 0

导航栏滚动吸顶并自动高亮和点击跳转锚点

2021-01-16 07:37:33 在阿里云的云市场页面上有一个效果，就是api导航栏当滚动条滚动到其所在位置时，自动吸顶，当滚动到下方所在导航栏指定的介绍时，自动高亮其导航栏。...实现方法正常情况下我们点击自动定位到其所在位置一般用id锚点的方式，但是这种方式有一个缺陷就是无法实现滚动条缓动效果，而且带url上还会通过hash的方式显示出ID，另外也无法实现滚动到内容所在位置自动高亮导航栏...那么需要我们自己手动来实现以下，具体实现思路就是增加滚动条监听事件，当滚动到导航栏指定内容区域时，给其导航栏增加高亮样式，点击导航栏时，计算好滚动条的滚动距离，让其滚动过去即可。...isToTop = false;//点击锚点时滚动条是向上还是向下 //导航栏点击事件 function navClick(id){ let groupList =...，并超过导航栏位置自动吸顶效果，同时点击导航栏滚动条缓动至锚点位置，实现的最终效果可以看阿里云市场详情页中的效果，比他显示的效果多了滚动条缓动效果。

11.2K5 0

超链接标签

超链接标签顾名思义就是它是一种允许我们同其他网页或站点之间进行连接的元素标签，就像我之前在文章里贴出来的链接传送门，你一点的话是不是会跳到指定的网页去，这就是超链接，所以我们的超链接标签的作用就是跳转到指定的页面里去..."是通过单击哪个链接打开的,那么这个链接就属于"活动链接"，也可以理解是用户最后一次点击的链接，在简单的说就是你鼠标放在超链接上面，然后点击不松手，就是红色了。...就是你点击了跳转页面的时候是在原来的页面进行跳转的，这里也不是很好演示，写了_blank的话，会在新的窗口打开。...，锚文本又称锚文本链接，是链接的一种形式。...首先我们要在顶部写一个a标签，此时顶部的a标签是我们希望被转过去的位置，所以需要在被转到位置添加，id="命名" name="命名">，注意id和name值相同并且与a命名相同,当然你省略

2.9K0 0

基于JS实现回到页面顶部的五种写法(从实现到增强)

写法【1】锚点　　使用锚点链接是一种简单的返回顶部的功能实现。...该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置　　[注意]关于锚点的详细信息移步至此的点位于显示区域的左上角　　设置scrollTo(0,0)可以实现回到顶部的效果 id="...如果没有提供该参数，默认为true 　　使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果...，则用图片代替) 　　使用CSS伪元素及伪类hover效果，当鼠标移动到该元素上时，显示回到顶部的文字，移出时不显示　　 .box{ position:fixed; right

6.8K2 1

掌握组件锚点布局：打造灵活精准的UI定位系统

本教程将详细讲解如何使用RelativeContainer的锚点布局功能，帮助你掌握这一核心技术。 2....2.1 锚点布局的核心概念锚点(Anchor): 用于定位的参考点，可以是容器本身或其他组件对齐规则(AlignRules): 定义组件如何相对于锚点对齐组件ID: 为组件分配唯一标识，使其可以被其他组件作为锚点引用...锚点布局的关键技术点 4.1 锚点类型在RelativeContainer中，可以使用以下几种锚点：锚点类型说明 container 代表RelativeContainer容器本身 parent...与__container__等效，代表父容器组件ID 引用具有特定ID的其他组件 4.2 对齐方式对齐方式定义了组件如何相对于锚点对齐：方向对齐方式说明水平方向 HorizontalAlign.Start...实际应用场景锚点布局在以下场景中特别有用：复杂表单布局：标签和输入框的精确对齐自适应卡片设计：内容根据容器大小自动调整位置悬浮按钮定位：相对于屏幕边缘或其他UI元素定位动态内容布局：当某些内容可能显示或隐藏时

1641 0

网页返回顶部的几种方法

1，在页面顶部固定一个返回网页顶部的按钮 .back-to-top { position: fixed; right: 20px; bottom: 10px;... 这样一点点击按钮直接返回网页顶部 2，使用jquery方法 var backBtn= $('.back-to-top'); backBtn.on('click...：这种方法，就是使用的自定义链接锚记了，必须要定义锚记，然后使用超链接指向锚。...4 href指向特定id：这种方法是在页面现有的标签中，使用“返回顶部”的连接的href指向顶部具有id属性的标签，以实现返回顶部的功能。...这种方法，需要在页面顶部的标签中有具有id属性的标签，来实现指向顶部。亦可自定义添加。

2.8K3 0

注意A链接的默认行为

无意间访问一家上市公司网站做的一个活动页，进去后会出现蒙板，让访客登录，右上角有一个关闭按钮。但很奇怪的是，我点击关闭按钮时，页面的滚动条被定位到页面顶部(页面链接多了一个锚“#”)。...（写这篇文章是因为在转发微博祝贺上以前策划同事跳到淘宝后为公司创造了很不错的业绩，之后有人评论说在大公司在工作自己的个人能力会被放大，同时纰漏也会被放大；正好我遇到的这个页面肯定是会有很多人去访问）职业习惯就是右击...记得最初加入以前的Web组时，入职后在工作位上的第一件事情是看web编码规范（XHTML、CSS、JavaScript的编码规范），它里面中就指出：所有不需要打开链接页面的A元素，它的href属性不允许写为...重点不在于写什么，在于使用onclick上，对于链接上需要触发点击事件的（不需要打开新页面的情况下）是如何处理的 1、使用onclick，oncilck=”fn();return false;”，取消它的默认行为...1、不会出现像文章开头那样描述的场景 2、在IE6下面如果不取消链接的默认行为，会听到讨厌的“咔~ 咔~”的声音，会感觉瞬间有一点卡（因为我的机器比较老，这一点感受比较深）唠叨这么多，只是想说，无论你在大公司

7053 0

一个专注于微信公众号 Markdown 排版的平台

支持把图片自动上传到云图床; 支持 Latex 数学公式在公众号等平台完美显示; 支持生成带样式的 html 文件; 甚至支持直接用原生的 html, css 排版。...页内的超链接试试页内的超链接：我是页内的超链接，注：你先要在要跳转的到地方放置一个类似：id="jump_1">任意内容的锚点。由id="jump_1"来匹配。...或跳到放置：id="footnote-10">任意内容的地方,[10] 对应id="footnote-10" TOC 看内容目录就是用[toc]生成的注：只要放置:[TOC],就能把其后面的标题如...id="jump_1">我是页内跳转到的位置 ,对应：id="jump_1" 先给点颜色你看看再给点颜色你看看试试改变字体大小改变字体大小，再来个粗体又如何？...”; 2:结合云图床，解决了Latex公式复制到知乎的问题; 3:点“图片”图标时，在云图床设置上新增了：“需要转换为图片的内容,会自动上传到云图床”选项 4:在“一键排版”的各样式文件中更新了Latex

3.6K2 1

返回顶部的五种实现方法

大家好，又见面了，我是你们的朋友全栈君。【1】使用默认链接锚点添加一个a链接，设置a链接的href属性值为”#top”即可实现我在顶部返回顶部【2】href指定id 给页面顶部元素设置一个id值，将返回顶部a链接的href属性指向改id属性的元素 id="goTop">我在顶部返回顶部【3】使用自定义链接锚点在页面顶部定义一个锚点，然后将返回顶部a链接的href属性指向该锚点 <a name...scrollTop(); 53 54 // 当窗口的滚动条的垂直距离大于页面的最小高度时，让返回顶部图标渐现，否则渐隐 55 if(

5.6K2 0

body标签中相关标签

锚链接：指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。...首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字示例： <!...上图中解释：第一个a标签，顶部这个锚的名字叫做top。然后在底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也出现了#top）。.../ceshi.html#top">回到顶部效果： ? 上面李四表示，点击之后，跳转到ceshi.html页面的top锚点中去。...说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。特殊几个链接：返回页面顶部的位置 <!

5.1K1 0

精确控制组件间距：外边距在相对布局中的高级应用

当一个组件被设置为另一个组件的锚点时，外边距会影响实际的锚点位置，从而影响整体布局效果。...2.1 外边距的特性影响锚点位置：外边距会扩展组件的边界，影响其作为锚点时的定位点不影响组件尺寸：外边距不会改变组件本身的宽高可单独设置四个方向：top、right、bottom、left可以单独设置...虽然视觉上只是在图片下方增加了16vp的空白，但实际上它扩展了图片的边界，使得当其他组件以此图片为锚点时，会考虑这个外边距。...通过将第一张图片(img1)作为锚点，并设置对齐方式为VerticalAlign.Bottom，第二张图片的顶部会对齐第一张图片的底部。...外边距在锚点布局中的高级应用 4.1 外边距与锚点的关系在RelativeContainer中，外边距会影响组件作为锚点时的实际位置：外边距方向对锚点的影响 top 向上扩展锚点边界 right

1110 0

点击加载更多

【第012期】如何设置页面锚点

hash实现锚点平滑滚动定位

React项目中如何实现一个简单的锚点目录定位

HTML4基础知识与排版技巧全面指南

HTML中的超链接

navigateTo:fail page pagesgoodsDetailsjavascript:void(0); is not found

Flutter 双向聊天列表效果进阶优化

HTML 锚点三种实现方法

API 23 widget.RelativeLayout.LayoutParams——属性分析

我们应该知道的标签

导航栏滚动吸顶并自动高亮和点击跳转锚点

超链接标签

基于JS实现回到页面顶部的五种写法(从实现到增强)

掌握组件锚点布局：打造灵活精准的UI定位系统

网页返回顶部的几种方法

注意A链接的默认行为

一个专注于微信公众号 Markdown 排版的平台

返回顶部的五种实现方法

body标签中相关标签

精确控制组件间距：外边距在相对布局中的高级应用

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐