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

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

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



	
		
		
		
	
	
		
点击跳转至第一首
点击跳转至第二首

我是第一首古诗
我是第一首古诗
我是第一首古诗
我是第一首古诗

我是第二首古诗
我是第二首古诗
我是第二首古诗
我是第二首古诗

元素在锚点定位后始终在页面居中显示的方法_第1张图片

尝试添加absolute定位也不行,因为它是根据整个网页页面来定位而不是跳转后你所看到的区域定位,跳转后仍然在浏览器顶部对齐。
当然解决方法也很简单,只需要在古诗上方的适当区域内设置一个空的div并添加锚点,跳转时定位到这个空的div处即可,空的div会和浏览器顶部对齐,而古诗会显示在中间位置。由于空div不会占位,所以对网页没有影响。同时同样为了不破坏网页结构,我们要给空div使用absolute定位。
元素在锚点定位后始终在页面居中显示的方法_第2张图片

第二首古诗默认会与浏览器底部对齐,同理我们只需在第二首诗底部下面添加一个空div即可。
元素在锚点定位后始终在页面居中显示的方法_第3张图片
修改后的代码如下:



	
		
		
		
	
	
		
点击跳转至第一首
点击跳转至第二首

我是第一首古诗
我是第一首古诗
我是第一首古诗
我是第一首古诗

我是第二首古诗
我是第二首古诗
我是第二首古诗
我是第二首古诗

你可能感兴趣的:(前端,html5,css,锚点)