首页 > 其他分享 >锚链接+固定定位(fixed)实现返回顶部导航

锚链接+固定定位(fixed)实现返回顶部导航

时间:2024-02-27 18:56:06浏览次数:27  
标签:定位 点击 锚点 第一段 fixed 导航 链接 页面

1.问题

想要做一个类似下图,固定在浏览器右下角,点击后即可返回

2.解决

锚链接+固定定位(fixed)
锚链接实现跳转,固定定位实现位置固定

3.锚链接定义

参考链接:锚链接的三种方式
锚点是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。锚点的作用就是在做一个很长的网页时,有时我们需要迅速到达页面的某个特定位置,点击时不是打开一个新的窗口或者跳转到其他网址,而是跳转到当前页的某一个特定位置。

1、使用id定位:这样的定位可以针对任何标签来定位。

第一段

点击跳到第一段

2、使用name定位: 使用name属性只能针对a标签来定位,而对div等其他标签就不能起到定位作用。

第二段

点击跳到第二段

3、使用js定位

点击跳到第一段

*不同的页面之间的链接:在不同的页面之间链接时要在href属性中加上网页名称

(1)Second.html中定义了标签 连接的位置

(2)从First.html中链接到Second.html并定到otherWebPage所在的位置

代码如下:

效果图:(整个页面大概)

点击跳到第一段锚点:

点击跳到第二段锚点:

点击跳到第三段锚点:

标签:定位,点击,锚点,第一段,fixed,导航,链接,页面
From: https://www.cnblogs.com/trmbh12/p/18037576

相关文章

  • 打包app端 登录页【非tabBar页面】底部会显示导航栏的解决办法
    如题,uniapp项目打包app后,登录页底部会显示导航栏的解决办法 首先直接在pages.Json中的对应页面配置中设置"navigationBarHidden":true这个方法是无效的"style":{       "navigationBarHidden":true   }但是可以通过js方式来控制页脚tabBar的隐藏与否:1、首......
  • 短链接的背后故事:为互联网用户带来的便捷与安全
    一、短链接的起源短链接是一种将长URL转换为短、简洁的网址的技术。它的起源可以追溯到互联网发展的早期,当时长URL的使用给用户带来了繁琐和不便。为了解决这个问题,短链接技术应运而生。短链接|一个覆盖广泛主题工具的高效在线平台(amd794.com)https://amd794.com/shortu......
  • Jetbrains IDE新UI设置前进/后退导航键
    参考文档:https://blog.csdn.net/qq_37475168/article/details/132507910  背景2023年6月,Jetbrains在新发布的IDE(Idea、PyCharm等)中开放了新UI选项,我们勾选后重启IDE,便可以使用这一魔性的UI界面了。但是前进/后退这对常用的导航键却找不到了,以前的设置方式(View->Appearance->......
  • 关于Linux中so显式链接(dlopen)找不到函数符号地址的问题
    摘自:https://blog.csdn.net/qq_27281753/article/details/127202676问题背景在做项目的时候,遇到一个so调用问题,既别人提供了一些so库,其中一个so库包含了给我调用的函数,而这个库里面的函数又调用了其他库的函数,这些所有的库都是linux下编译出来的,而项目则是需要在windows下用Qt交......
  • Python打开https链接报错:unable to get local issuer certificate
    Python打开https链接报错:unabletogetlocalissuercertificate或安装Python3.10以上版本,需要openssl1.1.1以上版本,会导致openssl下面缺少证书,记录下安装方法问题描述:当使用urllib.urlopen打开一个https链接时抛出如下异常:urllib.error.URLError:<urlopenerror[SSL:......
  • 05. Navigation 智能导航地图烘焙
    老师构造的场景修改材质的Shader,让材质可以绘制出不同的颜色Navigation烘焙在Unity2022中,Navigation烘焙好像被废弃了,这块我就不学了后面的课程需要用鼠标点击自动寻路,那没办法了,此系列完结,我还是从勇士传说项目开始学起来好了项目相关代码代码仓库:https://gitee.co......
  • 飞腾麒麟系统网络不自动链接
    一 mii-tool-vw mii-tool-vw 是一个在Linux系统中查询以太网卡物理层连接和工作模式的命令。具体解释如下:mii-tool 是一个用于管理和查询以太网控制器MII(MediaIndependentInterface)接口的命令行工具,它可以显示网卡的链路状态(是否连接)以及工作模式(......
  • MSSQL 建立链接服务器
     --建立Oracle数据库链接服务器EXECsp_addlinkedserver@server=N'POS',--要创建的链接服务器别名@srvproduct=N'Oracle',--产品名称@provider=N'OraOLEDB.Oracle',--OLEDB驱动名称@datasrc=N'192.168.1.240/gbpos'--数据源oracle"ora10g&qu......
  • 友情链接
    <pstyle="text-align:center;">欢迎来到我的友链小屋</p><divclass="friendsbox"><divid="app"><h6style="text-align:center;color:#2daebf;">展示本站所有友情站点,排列不分先后,均匀打乱算法随机渲染的喔!</h6><divclas......
  • 前端必学-40个精选案例实战-案例8-仿京东导航条触碰下拉效果
    导航条触碰下拉效果(理解鼠标浮动伪类、链接激活伪类)<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewpor......