HTML跳转到页面指定位置

这篇具有很好参考价值的文章主要介绍了HTML跳转到页面指定位置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用纯超链接实现

1. 实现本页面跳转到指定位置(a.html),代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<div>
		<div id="bb" style="width: 100%;height: 100vh;background-color: pink;">bb <a href="#aa">跳转到aa</a></div>
		<p>--------------------</p>
		<div id="aa" style="width: 100%;height: 100vh;background-color: lightblue;">aa <a href="#bb">跳转到bb</a></div>
	</div>
</body>
</html>

2. 实现点击跳转到新页面的指定位置,代码如下:

<a href="a.html#aa">跳转a.html的aa</a>

如果上方有导航条遮挡

<div id="aa" style="padding-top: 60px;margin-top: -60px;"></div>

 文章来源地址https://www.toymoban.com/news/detail-521230.html

到了这里,关于HTML跳转到页面指定位置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端编写页面HTML、CSS常用属性方法汇总

    不太常用的属性: box-shadow的: CSS3动画的点: 控制文字行数: CSS3的一些冷知识: @keyframes: HTML5: html+css乱七八糟的: JavaScript:

    2024年02月16日
    浏览(33)
  • 微信短链跳转到小程序指定页面调试

    首先说下背景:后端给了短链地址,但是无法跳转到指定页面。总是在小程序首页。指定的页面我们是h5页面。排查步骤如下: 1、通过快速URL Scheme 编译。上部普通编译 下拉找到此选项。 、 2、按照小程序的要求的URL Scheme输入。另外后端给的短链打开之后,拷贝尾缀作为t

    2024年02月10日
    浏览(38)
  • 微信扫码跳转到微信小程序指定页面

    用户想通过在微信上扫描实验室二维码直接进入小程序申请加入实验室 1、首先我们需要在微信公众平台的开发管理——开发设置,找到(扫普通链接二维码打开小程序),点击添加,会出现下面的页面,配置好之后点击保存就行了 填写页配置点击保存之后要再发布 2、在微

    2024年02月16日
    浏览(66)
  • CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

    !DOCTYPE html !-- 这是HTML的注释 -- html lang=\\\"en\\\" id=\\\"myHtml\\\"     head         !-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --         meta charset=\\\"UTF-8\\\"         meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"         titleHtmlAll/title         

    2024年02月05日
    浏览(38)
  • HTML+CSS+ElementUI搭建个人博客静态页面展示(纯前端)

    登录页面 门户页面 博客页面 技术选取: HTML/CSS + VUE2 + ElementUI(Version - 2.15.14) 编程软件: VSCode 环境配置与搭建 安装指令 ELement 在 node 下载后,会发现 node_modules/element-ui 文件夹,直接复制到本地,之后按照文件路径引用并配置 [1]ElementUI - 2.15.14官网 [2] 获取图片网址 [3] 登录页面获

    2024年02月05日
    浏览(37)
  • 帝国CMS表单提交跳转到指定页面的实现方法

    帝国CMS提交后经常会默认进入指定的页面,下面提供的教程无需改文件。 直接再登陆表单加这个: 放在表单 内即可。

    2024年02月03日
    浏览(33)
  • 实现微信扫一扫跳转到小程序指定页面

    使用场景:例如我们经常用到的共享充电宝,首先我们需要使用手机上的微信,打开微信扫一扫,扫描共享充电宝上的二维码,当我们扫描二维码后微信会直接跳转到小程序内的某个页面(不一定是首页)。像其他的一些共享设备也是一样的运行模式。那么怎么样才能通过微

    2024年02月02日
    浏览(46)
  • 从短信,H5页面浏览器跳转到微信小程序指定页面

     在H5页面或者短信链接中要进行小程序跳转,所以需要通过生成具体页面的链接进行跳转 1、参考链接生成接口,详见微信官方文档地址:urllink.generate | 微信开放文档      重点参数如图:       2、后端调用api进行生成  请求完的结果: 3、前端页面入口  4、编写一个中间

    2024年02月11日
    浏览(43)
  • web前端html+css页面内容的六种隐藏方式

    一、使用透明度 语法:opacity:0 注意:元素消失,但是还会占据空间,只是视觉看不出来   二、使用display 语法:display:none 注意:元素消失,不会占据空间   三、scale 缩放 语法:transform:scale(0)    值大于1放大,小于1缩小 注意:元素消失,但是还会占据空间   四、使用vis

    2024年02月08日
    浏览(39)
  • HTML+CSS仿写京东页面附代码(web前端大作业)

    学习前端时间不多,看了两晚上就开始赶实训作业,大家看看就行 先来看看效果:         相关资源可以在主页资源查看

    2024年02月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包