html - 始终停止在页脚上方滚动返回顶部按钮纯 css 和 html

Question

我有一个按钮可以在用户向下滚动页面时向下 float 页面，但是有没有办法让它在一直滚动到底部后始终保持在页脚上方。

我试过 z-index，但我找到的所有解决方案都使用 javascript/jquery，我需要它是纯 html 和 css

已编辑:页脚代码位于 html 中按钮代码的下方，还有您如何确保无论页面大小如何，页脚都保持在底部。

.footer {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #1B1B1B;
  color: #FFFFFF;
  text-transform: uppercase;
  font-weight: lighter;
  letter-spacing: 2px;
  border-top-width: 2px;
  padding: 2px;
  color: #ffffff;
  width: 100%;
  position: static;
  font-weight: 200;
  bottom: 10px;
}


/*Floating Back-To-Top Button*/

#myBtn {
  position: fixed;
  bottom: 10px;
  float: right;
  right: 18.5%;
  left: 77.25%;
  max-width: 50px;
  width: 100%;
  font-size: 12px;
  border-color: rgba(85, 85, 85, 0.2);
  background-color: rgb(100, 100, 100);
  padding: .5px;
  border-radius: 4px;
  z-index: 1000;
}


/*On Hover Color Change*/

#myBtn:hover {
  background-color: #7dbbf1;
}

<button id="myBtn"><a href="#top">Top</a></button>

<div class="footer">

<p><span>Aditya's Website | Websystems Assignment | Copyright &copy; 2019</span></p>
 <a href="index.html"> Home </a> | <a href="past.html">Past</a> | <a href="future.html">Future</a> | <a href="comments.html">Comments</a>
</div>

Answer 1

button 位于 footer 之上。请检查代码.. 或者在问题中添加 footer HTML 和 CSS

.footer {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: red;
  color: #FFFFFF;
  text-transform: uppercase;
  font-weight: lighter;
  letter-spacing: 2px;
  border-top-width: 2px;
  padding: 2px;
  width: 100%;
  font-weight: 200;
  bottom: 10px;
  height: 30px;
  position: absolute;
  bottom: 0;
}


/*Floating Back-To-Top Button*/

#myBtn {
  position: fixed;
  bottom: 10px;
  float: right;
  right: 18.5%;
  left: 77.25%;
  max-width: 50px;
  width: 100%;
  font-size: 12px;
  border-color: rgba(85, 85, 85, 0.2);
  background-color: rgb(100, 100, 100);
  padding: .5px;
  border-radius: 4px;
  z-index: 1000;
}


/*On Hover Color Change*/

#myBtn:hover {
  background-color: #7dbbf1;
}

<button id="myBtn"><a href="#top">Top</a></button>
<footer class="footer">
</footer>