锚点、绝对定位---回到顶部

<html>
<head>
  <meta charset="utf-8">
  <title>锚点、绝对定位---回到顶部</title>
<style>
/*position:fixed;绝对定位*/
#image2{
margin-left:90%;
margin-top:35%;
position:fixed;
}
#image2 span{
    position:absolute;
    top:0;
    left:0;
    color:red;
}
/* 只是纯粹的设置背景图片位置而已
body{
    background-image:url(./111.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:100% 50%;
}
*/
</style>  
</head>
<body>
<h1 align="center"><a name="top">返回顶部测试</a></h1>

<div id="image2">
    <a href="#top">
        <img src="./111.jpg" alt="111"/> 
    </a>
    <span>回到顶部</span>
</div>

<table width="100px" height="500px" border="1" cellspacing="0" cellpadding="5px">
    <tr><td>111</td></tr>
</table>
<hr/>
<h2 align="center" style="color:red;font-size:20px;">中部</h2>
<table width="100px" height="500px" border="1" cellspacing="0" cellpadding="5px">
    <tr><td>222</td></tr>
</table>
</body>
</html>
View Code

<html> <head> <meta charset="utf-8"> <title>锚点、绝对定位---回到顶部</title> <style> /*position:fixed;绝对定位*/ #image2{ margin-left:90%; margin-top:35%; position:fixed; } /* 只是纯粹的设置背景图片位置而已 body{ background-image:url(./111.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:100% 50%; } */ </style> </head> <body> <a name="top">顶部</a> <div id="image2"> <a href="#top"> <img src="./111.jpg" alt="111"/> </a> </div> <table width="100px" height="500px" border="1" cellspacing="0" cellpadding="5px"> <tr><td>111</td></tr> </table> <hr/> <table width="100px" height="500px" border="1" cellspacing="0" cellpadding="5px"> <tr><td>222</td></tr> </table> </body> </html>
原文地址:https://www.cnblogs.com/1020182600HENG/p/6060939.html