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