[随笔] Html锚点/JS实现页面内跳转至指定位置(返回顶部、页内定位)

最新推荐文章于 2024-04-07 09:41:34 发布
最新推荐文章于 2024-04-07 09:41:34 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44731536/article/details/103762812
版权
本文介绍了两种实现页面内定向跳转的方法，包括HTML锚点和JavaScript定位。锚点方法通过id命名顶部标签，使用a标签href属性进行跳转，但可能因URL变化导致失效。JS定位则通过命名顶部标签并调用scrollIntoView方法实现，避免URL变化问题。
摘要由CSDN通过智能技术生成

要实现页面内定向跳转 — 以返回顶部为例

方法一：HTML锚点

  • 实现:
    1、在顶部标签用 id 命名（‘top’）
    2、使用 a 标签，其 href 属性写 href="#top" 来实现页面内跳转
  • 缺点
    会让 url 地址发生改变，会受页面路由等的影响而失效。

方法二：JS定位

  • 1、在顶部某标签用 id 命名(为‘top’)
<div class="myHerder" id="top">
最低0.47元/天 解锁文章
"William'_
关注
专栏目录
Vue2 - 最新详细实现锚点跳转及平滑过渡动画功能，锚点定位滑动吸顶将锚点菜单固定在顶部或悬浮，页面导航菜单跳转指定元素位置、文章目录跳转到对应章节等场景，vue2锚点滚动至指定区域详细示例代码教程
王佳斌
07-05 4427
vue2，nuxt2，锚点，锚点定位，跳转到指定位置，锚点定位跳转，添加锚点，根据文章浏览位置，目录高亮相应标题，锚点定位的目录，竖向滚动条效果并实现锚点定位跳转，滚动与导航联动，导航栏绑定内容锚点+滚动动画，vue锚点平滑滚动，如何设置描点跳转到对应页面，菜单绑定内容锚点滚动动画，锚点滚动过程怎么加入动画，过渡效果，anchor，导航锚点联动，滚动监听和点击平滑滚动跳转实例，页面内跳转锚点的使用，跨页面锚点跳转，锚点滚动，定位滚动，实现锚点定位以及平滑滚动到指定位置，动态锚点定位，页面滚动和点击菜单联动效
JS实现页面进入和返回定位到具体位置
01-19
其实浏览器也自带了返回的功能，也就是说，自带了返回定位的功能。正常的跳转，返回确实可以定位，但是有些特殊场景就不适用了。例如，某些元素是在某种情况下才加上的，又或者多级定位。 目前，我知道的返回定位到具体位置有两种方法： ①利用id定位，在跳转的时候带上某个模块的id，返回的时候定位到该处。 ②利用距离顶部的距离，在跳转的时候带上当前位置滚动过的距离，返回的时候定位到该处。 一般应用场景： 定位到某一个模块的时候，有二级定位的时候利用方法①. 定位到具体位置的时候，定位到某一个模块的时候，利用方法②。 有二级定位的时候具体实现方法： 1.常见的场景就是有一个tab模块，tab模块下面有相应的内
JS控制div跳转到指定的位置的几种解决方案总结
weixin_34010566的博客
08-08 597
原文：http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。 总结一下自己在写这个需求遇到的问题，相信大家应该是经常遇到的。即要求滚轮滚动到指定的位置。先看下基本的解决方案。 1.给链接a加个#的方式来实现跳转。（锚点方法）这里直接贴下代码: ...
jquery和js实现页面返回到之前的位置
王威振的博客
08-29 2319
1.首先在进入详情或者跳到其他页面的时候，要在之前获取滚动条的位置。 jq:$(document).scrollTop(); js:document.scrollingElement.scrollTop 记录到cookie中，$.cookie("Y",$(document).scrollTop(),{"path":'/'}) 2.下次对返回之后的位置进行恢复 jq:$("html,bo...
js回到顶部或定位到指定元素
weixin_43456275的博客
10-31 537
js回到顶部或定位到指定元素
JS如何实现在页面上快速定位（锚点跳转问题）
10-19
JS实现页面快速定位的技术主要涉及锚点跳转的概念和应用。锚点，也被称作片段标识符，其作用是允许用户点击链接后页面能够跳转到特定的位置。在网页设计中，尤其是在内容较多、页面较长的情况下，合理使用锚点可以...
页面内锚点定位及跳转方法总结（推荐）
12-08
页面内锚点定位和跳转是网页设计中常见的交互元素，它允许用户通过点击链接快速定位到页面内的特定位置。本文将对几种不同的锚点定位和跳转方法进行详细总结，帮助开发者更好地理解和应用这些技术。 首先，最基础的...
HTML——返回顶部和锚点
spfLinux的博客
10-18 1725
111111 2435345 返回顶部 --> id1 id2 1111111 2222222
HTML页面滚动时获取离页面顶部的距离2种实现方法
09-05
获取离滚动页面的顶部距离有两种方法一是DOM；而是jquery，具体的实现如下，感兴趣的朋友可以尝试操作下
html页面 头部、尾部固定 中间可拖动效果
Aviciie的博客
03-14 8252
公司项目要求做这么个效果，查阅资料后基于Y_mmmmmmm的博客改成自己需要的样子，已经实现。Html模板：&lt;div class='header'&gt;&lt;/div&gt; &lt;div class='middle_outer'&gt;     &lt;div class='middle_inner'&gt;&lt;/div&gt; &lt;/div&gt; &lt;div ...
html5页面头和尾固定不动,HTML5 固定页面头部/页面滚动时自动隐藏
weixin_42205158的博客
06-04 591
HTML导入代码模板：Here's a sticky headerSticky header, hides on scrollAlso, it doesn't break with any elastic browsers that scroll beyond the top.Pellentesque habitant morbi tristique senectus et netus et ma...
html中多个网页的跳转页面,Html --- Footer 多页面应用跳转
weixin_26808023的博客
06-03 1164
首页分类购物车我的页面嵌套的思路：1、对底部导航数据的配置---- 配置数据 (注入数据 识别数据)2、页面嵌套 for循环 添加数据3、焦点状态更改+页面跳转【难点】---- 这里不能直接用click跳转页面 要引入插件 这就是单页面应用和多页面也应的区别//单vue文件必须这样写export default{data(){return{ }}}// 官方文档解释 如果是单页面应用 可能会在多个...
前端点击跳转页面 刷新 返回 是默认的导航
Guanerye0314的博客
02-19 138
/ 在页面刷新时将vuex里的信息保存到sessionStorage里。// 在页面加载时读取sessionStorage里的状态信息。// beforeunload事件在页面刷新时先触发。
如何在HTML不同的页面中，共用头部与尾部？HTML的引入几种方法
瑰的博客
10-14 3099
asp语言和PHP语言 的使用 首先制作一个头部文件head.asp，或者一个底部文件foot.asp。如主页是index.asp，调用头部代码是在index.asp文件代码的开始位置（第一个标记后面，<head>标记前面）增加如下代码： <!– #include file=”head.asp” –> 调用共用底部文件代码是在index.a...
vue H5列表页面 点击跳转看详情 返回列表页保持在当前位置
tendernessxy的博客
03-23 2052
vue H5列表页面 点击跳转看详情 返回列表页保持在当前位置
前端实现打开新标签页后，再次定位到该标签页
最新发布
Moon Star
04-07 597
A 页面点击某按钮打开了新的标签页 B，当新的标签页 B 未关闭且符合同源策略时，再次点击按钮，可以自动跳转到标签页 B。
在vue中,点击某一个标签按钮,跳转到当前页面的具体位置.(不需要安装插件)
weixin_42164352的博客
08-31 861
页面内的跳转到具体位置
"HTML链接实现页面跳转和锚点定位-极品html课件详解
</HTML> 这段描述是关于一份名为“极品HTML课件（超全）”的课件的概述。课件包含了HTML的基础知识和进阶内容，涵盖了各个方面，包括标签的使用、文本格式、插入图像和链接、构建表格等。无论是初学者还是有经验的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值