浏览器在表单的位置打开页面，而不是在顶部，即使我在顶部放置一个锚点也是如此

。

这是因为浏览器在加载页面时，会按照HTML文档的结构从上到下逐行解析和渲染，而不是根据锚点的位置来确定页面的显示位置。

当浏览器解析到表单元素时，会根据表单元素在HTML文档中的位置，将其显示在相应的位置上。如果表单元素位于页面的中间或底部，那么浏览器加载完成后，页面会自动滚动到表单元素所在的位置。

即使在页面的顶部放置一个锚点，也不会改变浏览器加载页面时的行为。锚点通常用于页面内部的导航，当用户点击包含锚点的链接时，浏览器会滚动到对应的锚点位置，以便用户可以快速跳转到指定的内容区域。

总结起来，浏览器在加载页面时，会按照HTML文档的结构逐行解析和渲染，表单元素会显示在其在HTML文档中的位置，而不是根据锚点的位置确定页面的显示位置。

腾讯云相关产品推荐：

腾讯云CDN（内容分发网络）：提供全球加速、高可用、低时延的静态和动态内容分发服务，加速网站访问速度。详情请参考：腾讯云CDN产品介绍
腾讯云云服务器（CVM）：提供弹性计算能力，支持多种操作系统，适用于各类应用场景。详情请参考：腾讯云云服务器产品介绍
腾讯云云数据库MySQL版：提供高性能、高可靠的云数据库服务，支持自动备份、容灾、监控等功能。详情请参考：腾讯云云数据库MySQL版产品介绍
腾讯云人工智能平台（AI Lab）：提供丰富的人工智能算法和工具，支持图像识别、语音识别、自然语言处理等应用。详情请参考：腾讯云人工智能平台产品介绍
腾讯云物联网套件（IoT Hub）：提供全面的物联网解决方案，包括设备接入、数据管理、消息通信等功能。详情请参考：腾讯云物联网套件产品介绍
腾讯云移动推送（TPNS）：提供高效可靠的移动消息推送服务，支持Android和iOS平台。详情请参考：腾讯云移动推送产品介绍

相关·内容

4.6K1 0

大屏时代的生态变迁，看平板手机的拇指热键与界面布局

实际上，早已普及的下拉刷新模式也是相同的道理，用户不必与界面远端的某个控件产生交互，只要直接在内容上进行手势操作即可。对于移动版本的网页，仍然建议使用前文中介绍过的锚点链接导航模式。...我们在小屏设备上遇到的诸如CSS兼容性局限或页面元素与浏览器自身布局冲突等一系列问题，在平板手机中依然存在。...诚然，将锚点链接放置在顶部的做法算不上对拇指友好，但综合考虑，这个因素在浏览器环境中的重要性就没有那么高了。...人们使用屏幕巨大的手机，不代表他们有着巨人般的手，手势应该围绕手指进行设计，而不是围绕屏幕。整体移动。界面中的多数元素是静态的，需要我们自己伸手触及。...TIME在其移动版页面侧边放置了一个“抽屉把手”，点击之后会展开一个完整的近期新闻面板。在屏幕左右边缘放置的交互元素很可能处于平板手机的拇指热区之外，但无论怎样也比放置在顶部更加容易操作。

2.4K1 0

JavaScript基础学习--01热身

submit),不必要的表单提交 5、js中变量的合理利用 6、href="javascript:;" 和 href=""以及href="#"的区别： "＃"包含了一个位置信息,默认的锚点是＃top...也就是网页的上端,a href ="#" 不会刷新页面，会回到页面顶部。 ...a href ="" 默认打开的还是当前页面，会刷新一下重新打开。 ...而javascript:void(0) 仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首, 而javascript:void(0) 则不是如此,所以调用脚本的时候最好用...void(0) 注意点：要执行某些处理，但是不整体刷新页面的情况下，可以使用void (0),但是在需要对页面进行refresh的情况下 7、window.onload = function

8639 0

Html标签href的困惑记载

- 指向页面中的锚（href=”#top”）根据网搜得到的答案如下，亲测也的确如此：点击: 点击链接后不会回到网页顶部 <a href...而对于Href第三点～指向页面中的锚，如下用法：需要转到地方添加，文字，注意href值是#开头+英文字母命名需要在被转到位置添加，<span id="命名" name...并且当 href=”#” 之时也会回到页面顶部.) 即可得出当使用（href=”#”）之时即有可能会回到页面顶部。但问题是，活动一屏幕足以显示完，无需滑动，Ios手机也是如此。...最后，也更进一步的疑问：JavaScript中语句最后的分号是可以缺省的，那为何要使用javascript:;而不是javascript:呢？是习惯还是规范，我也很疑惑！我也很疑惑！我也很疑惑！...总结：#包含了一个位置信息默认的锚是#top 也就是网页的上端; 而javascript:void(0)仅仅表示一个死链接，没有任何信息。

3.4K5 0

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

写法【1】锚点　　使用锚点链接是一种简单的返回顶部的功能实现。...该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置　　[注意]关于锚点的详细信息移步至此 <body style="...如果没有提供该参数，默认为true 　　使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果...【1】显示增强　　使用CSS画图，将“回到顶部”变成可视化的图形(如果兼容IE8-浏览器，则用图片代替) 　　使用CSS伪元素及伪类hover效果，当鼠标移动到该元素上时，显示回到顶部的文字，移出时不显示...，就是当页面内容较多时，回到顶部的动画效果将持续很长时间。

5.4K2 1

html常用标签

语法： 1结婚照 a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。...为毛有一个_ ，就是规定，没啥好解释的。也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开。...完整的超级链接：链接的内容关于超级链接的herf里面也是相对路径页面内的锚点：锚点用name属性来设置...，一个a标签如果name属性（或者id属性），那么就是页面的一个锚点。...1我的作品 2或者： 3我的作品` 如果有一个超级链接，指向页面中的锚点，那么就是： 1点击我就查看我的作品

5.2K2 0

返回顶部的几种方法总结

大家好，又见面了，我是你们的朋友全栈君。 1.锚点但是唯一的缺点就是样式不怎么样，会显示这个锚标记。... 放置位置在标签之后随便找个地方放都可以，只要靠近顶部即可。...页面底部放置：返回顶部二、使用Javascript Scroll函数返回顶部 scrooll函数用来控制滚动条的位置，有两种很简单的实现方式...> scroll第一个参数是水平位置，第二个参数是垂直位置，比如要想定位在垂直50像素处，改成scroll(0,50)就可以了。...if(document.documentElement.scrollTop==0) clearTimeout(scrolldelay); 缺点：滚动效果不平滑，且在页面很长时点击返回顶部，未向上到达页面顶部无法再正常浏览页面

1K1 0

我们应该知道的标签

2、电子邮件链接内容 3、返回页面顶部空链接返回顶部注意：设置超链接时，如果不确定要链接到哪个位置处时...，请使用#，因为 href="",会刷新页面，而href="#",还在这个页面，默认回到最顶部 4、锚点作用在页面中的某行位置处，做一个记号，方便页面能够随时跳转到记号位置处使用方式...1、跳转到本页的锚点处内容 2、跳转到其他页锚点处内容 5、链接到JS <a href=...href="#"与href="javascript:void(0)"的区别 # 包含了一个位置信息，默认的锚是#top 也就是网页的上端。...在相同的框架中打开被链接文档。 _parent 在父框架集中打开被链接文档。 _top 在整个窗口中打开被链接文档。 framename 在指定的框架中打开被链接文档。

1.6K1 0

HTML笔记

HTML的笔记(上) 什么是HTML HTML：Hyper Text Markup Language(超级文本标签语言) HTML页面结构有两部分组成：文档类型声明作用：告诉浏览器使用的是HTML...doctype html> 标签的嵌套在一个标签中，出现另外一个标签，从而形成层叠关系，里面的标签又称为“子标签”，外面的标签又称为“父标签” 推荐写法：在子元素前，...”mailto:邮箱地址”>联系我们 3.锚点就是网页中的一个记号，通过超链接可以迅速到达记号所在的位置....实现步骤：第一步：定义锚点方式一：使用任意标签的id属性定义锚点化妆品区域方式二：使用a标签的name属性，定义锚点化妆品区域... 第二步：链接到锚点化妆品 4、返回顶部返回顶部块级元素和行内元素块级元素在网页中独占一行，可以设置宽高比如<

2.3K3 0

HTML 基础

_self 默认值，在自身标签页中，打开新网页 ②. _blank 在新标签页中，打开新网页 (3). name 定义页面锚点 (4). 链接的表现形式 ①....锚点(Anchor)，在 html 文档的某行位置处做一个记号，允许通过超链接跳转到该记号位置处 (1). 定义锚点(做记号) ①....通过 a 标记的 name 属性，内容 ②. 通过任意标记的 id 属性， (2). 链接到锚点(跳转到锚点处) ①....只有出现在 form 中的表单控件的数据才会被提交 ②. form 在页面中没有显示效果，只有功能 39....文字浮动框架，可以在一个浏览器窗口中同时显示多个页面文档的内容（在一个页面中引入另外一个页面)，内容可以为普通的文体描述，当浏览器不支持元素时，将显示该文本描述信息

4.2K1 0

超强的 Anchor Positioning 锚点定位

Anchor Positioning（锚点定位）允许我们基于其它锚点元素的位置和尺寸去定位上下文，而不是传统意义上的基于父元素去进行绝对定位。...，譬如锚点定位的 Fallback 机制，也就是可以设置多套不同的锚点定位规则，以适应更为复杂的页面布局情况下面，我们通过一个最简单的例子，快速理解，到底什么是锚点定位。...在 .g-use-anchor 中，新增了两句代码 top: anchor(--target top)：这里的意思是，使用 name 为 --target 的锚点元素作为定位基准，并且将元素的顶部（top...Anchor Positioning（锚点定位）允许我们基于其它锚点元素的位置和尺寸去定位上下文，而不是传统意义上的基于父元素去进行绝对定位。...首先，我们来看这么一个功能点，我们的页面有很多需要 Hover 的时候弹出的 Popover 或者 Tooltip，像是这样：每次 Hover 的时候，弹出框的位置，其实都是需要实时通过 JavaScript

4043 0

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

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

2.1K3 0

web前端基础

div标签：用来定义一个块级标签又称为行外标签，块级标签独占一行 span标签：用来定义一个内联标签又称行内标签，行内标签不独占一行块级标签和内联标签分类：块级标签内联标签...src="syr.jpg" alt="我是赛亚人" title="我是赛亚人"> 超链接a标签？...超链接标签属性：标签属性描述 target 点击超链接的动作 href 要跳转的网址代码示例：跳转到https://www.acai.cloud地址时用浏览器空白标签页打开... 去除a标签下划线： a{ text-decoration: none; } 设置a标签锚点功能：点击回到顶部，页面跳转到顶部位置...顶部位置 …… 回到顶部 ul列表标签？

1.2K0 0

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

有路由进行跳转，href="javascript:void(0);"这种写法代表禁止超链接跳到另一个地址，但是在mpvue中，可用a标签实现页面跳转，所以以上的写法不可行。... 点击链接后，页面不动，只打开链接 href=”javascript:void(0);”与href...=”#"的区别点击点击链接后不会回到网页顶部点击点击后会回到网面顶部 "＃"其实是包含了位置信息，...例如默认的锚点是＃top 也就是网页的上端而javascript:void(0) 仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首而javascript:void(...0) 则不是如此所以调用脚本的时候最好用void(0) 使用javascript的方法文字

9042 0

position-try-fallbacks

的css属性它就像字面意思是说：位置-尝试-反馈代表着它在页面移动时尽可能调整位置进行反馈举个栗子： .target { position: absolute; position-anchor...: --my-anchor; position-area: top; position-try-fallbacks: bottom; } 我写下代码： /* 定义一个锚点元素...*/ position-area: top; /* 默认在顶部对齐 */ position-try: bottom; /* 尝试从底部定位 */ width...tmp-container"> anchor target /* 定义一个锚点元素...*/ position-area: top; /* 默认在顶部对齐 */ position-try: bottom; /* 尝试从底部定位 */ width

891 0

关于页面滚动的两个 CSS 属性

scroll-behavior 原先这个主题在文章下方的作者是有一个分享文章到 facebook 和 twitter 的。在转移主题到 Hexo 的时候也就顺便复刻了下来。...一般返回顶部都是直接用 JS 实现的，但是我不懂 JS ，写个 console.log 我都不会就不用说写返回顶部了。那就直接用回最原始的方法：锚点定位。...锚点定位其实很好用，但主要是太生硬了，点一下定位就瞬间冲过去了，没有任何过渡。很多人用JS来做返回顶部而不用 CSS 可能就是锚点定位的这个缺点。...建议可以滚动的地方都加上 scroll-behavior，不用白不用。貌似目前主流浏览器都支持了，当然IE不是主流。...scrollbar-gutter 浏览器的滚动条是有宽度的，而且会占用页面的空间导致页面抖动。

7032 0

九、知识拓展

，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。...4、"` 这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。...5、"` 这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置...如果当前页面中需要滚动的话，那么用这种方式就可以直接回到顶部。比如有些网站会在右下角制作一个图标按钮，回到顶部，那么此时可以考虑用这种最简单的方式实现。...3、锚 URL 此时指向页面中的锚，比如href="#top"，那么点击时就会到当前页面中id="top"的这个锚点，实现当前页面的所谓跳转。

9502 0

vivo悟空活动中台-基于行为预设的动态布局方案

，初步满足了“满屏”的需求，但是仍然存在不足：不够灵活固定定位的问题在于元素始终是以自己的某条边相对于视口的对应边框进行定位（如：只能是元素顶部相对于窗口顶部位置固定，而不能实现元素底部相对于窗口顶部位置固定的需求...2.2.1、锚点元素内部选取一个定位中心，作为锚点，将来元素的定位都是基于锚点进行计算。...锚点的设置可以让元素的定位更加灵活：如果将元素的锚点设置为其底边的中点，那么令锚点吸附视口顶部即可实现元素底部相对视口顶部距离固定，这是常规固定定位无法实现的。...2.2.2、吸附性对于一个元素，可以预设其锚点吸附于视口的顶部/底部，左边/右边，具体规则如下：元素在水平方向或垂直方向上，不能同时吸附对应的两条边；比如不能令一个元素同时吸附视口顶部和视口底部；但是可以另其同时吸附视口顶部和视口左边...3.2、吸附性不同视口内，页面元素的锚点相对于视口的某一个边的位置是定值，称该元素吸附于该条边，视吸附的边的不同，可以分为吸顶、吸底、靠左和靠右；对于某个元素，若其在水平或竖直方向并

2.1K1 0

超链接标签

超链接标签顾名思义就是它是一种允许我们同其他网页或站点之间进行连接的元素标签，就像我之前在文章里贴出来的链接传送门，你一点的话是不是会跳到指定的网页去，这就是超链接，所以我们的超链接标签的作用就是跳转到指定的页面里去...image.png image.png 如果你希望当前的页面保持不动，点击之后可以在新的窗口打开页面，这里就要用到一个新的属性，就是target属性。...是不是有点难理解，target属性有四个属性值，分别是：_blank，_self，_parent，_top。 _blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。...就是你点击了跳转页面的时候是在原来的页面进行跳转的，这里也不是很好演示，写了_blank的话，会在新的窗口打开。...首先我们要在顶部写一个a标签，此时顶部的a标签是我们希望被转过去的位置，所以需要在被转到位置添加，，注意id和name值相同并且与a命名相同,当然你省略

2.5K0 0

网页返回顶部的几种方法

1，在页面顶部固定一个返回网页顶部的按钮 .back-to-top { position: fixed; right: 20px; bottom: 10px;...这种方法其实跟第二种方法差不多，只不过必须要额外定义一个链接锚记。...4 href指向特定id：这种方法是在页面现有的标签中，使用“返回顶部”的连接的href指向顶部具有id属性的标签，以实现返回顶部的功能。...这种方法，需要在页面顶部的标签中有具有id属性的标签，来实现指向顶部。亦可自定义添加。...5 使用简单脚本：这种方法也是最近知道的，可以设置scrollTo(0,0)中的x、y的值来跳转到页面的具体位置。

2.5K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云