While creating a Back To Top button, I set it to a fixed position using the position:fixed; property and also background-attachment:fixed;, but I'm still facing issues with its position changing when new data is inputted.
<html>
<head>
<title></title>
<style type="text/css">
a{
text-decoration:none;
color:black;
font-weight:bold;
}
a:hover{
border-bottom:1px solid rgba(0,235,255,0.77);
border-top:1px solid rgba(0,235,255,0.77);
}
ul{
list-style:none;
align-content:center;
}
li{
float:left;
font-size:20px;
padding-left:250px;
}
.background{
margin:0;
background-image:url("MWYLJ6SRDM.jpg");
background-size:1380px auto;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
.topbar{
background-color:rgba(255,255,255,0.90);
height:50px;
width:100%;
color:black;
position:fixed;
z-index:1;
}
.backToTop{
background-color:rgba(240,0,255,0.72);
width:50px;
height:50px;
border-radius:25px;
/*background-attachment:fixed;
position:fixed;*/
position:relative;
left:1295px;
top:600px;
}
</style>
</head>
<body class="background">
<div class="topbar">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<div class="backToTop">
</div>
</body>
</html>