元素在锚点定位后始终在页面居中显示的方法

最新推荐文章于 2023-03-04 23:13:03 发布

前水员

最新推荐文章于 2023-03-04 23:13:03 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签： html5 css 锚点

本文链接：https://blog.csdn.net/qq_43465434/article/details/111770661

版权

本文介绍了如何使元素在锚点定位后始终在页面居中显示。通过在目标元素上方添加一个空的div作为锚点，利用absolute定位，实现跳转后元素保持在屏幕中央的效果。这种方法避免了直接定位导致的问题，且不会影响网页原有结构。

摘要由CSDN通过智能技术生成

元素在锚点定位后始终在页面居中显示的方法

锚点定位功能可以使我们快速方便地跳转到我们想去的任何位置，但是如果我们在某个元素上添加锚点并跳转后，该元素始终会贴近在浏览器顶部，下面举例说明。
比如说有这样一个案例，有两首古诗在分别在某个高度很大的网页的中间位置，我们在浏览器顶部放了一个选择器，并在第一首古诗的位置设置好锚点。点击选择器，古诗的显示方式始终和浏览器顶部靠齐。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#poetry1{
				margin-top: 1000px;
			}
			#poetry2{
				margin-top: 1000px;
				margin-bottom: 1000px;
			}
		</style>
	</head>
	<body>
		<h5><a href="#poetry1">点击跳转至第一首</a></h5>
		<h5><a href="#poetry2">点击跳转至第二首</a></h5>
		
		<p id="poetry1">我是第一首古诗<br>我是第一首古诗<br>我是第一首古诗<br>我是第一首古诗<br></p>
		<p id="poetry2">我是第二首古诗<br>我是第二首古诗<br>我是第二首古诗<br>我是第二首古诗<br></p>

最低0.47元/天解锁文章

前水员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
元素在锚点定位后始终在页面居中显示的方法

元素在锚点定位后始终在页面居中显示的方法锚点定位功能可以使我们快速方便地跳转到我们想去的任何位置，但是如果我们在某个元素上添加锚点并跳转后，该元素始终会贴近在浏览器顶部，下面举例说明。比如说有这样一个案例，有两首古诗在分别在某个高度很大的网页的中间位置，我们在浏览器顶部放了一个选择器，并在第一首古诗的位置设置好锚点。点击选择器，古诗的显示方式始终和浏览器顶部靠齐。<!DOCTYPE html><html> <head> <meta charset="u
复制链接

扫一扫

专栏目录