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

【问题标题】：stopping scrolling back-to-top button above the footer at all times pure css and html始终停止在页脚上方滚动返回到顶部按钮纯 css 和 html
【发布时间】：2019-09-09 04:03:22
【问题描述】：

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

我尝试过 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>

【问题讨论】：

你为什么使用 position: static;？如果您希望页脚位于底部并固定，请使用 position: fixed;
我将它从静态更改为固定，但页脚仍然没有停留在底部编辑：没关系它工作，我在底部有填充使其失败。
如何使页脚不覆盖正文内容的底部。我需要在页脚或正文的某处添加填充吗？
您能分享一下您当前的输出和预期输出吗？如果您使用固定，则页脚将始终固定在底部。

标签： html css button footer

【解决方案1】：

button 位于footer 之上。请检查代码..或在问题中添加footerHTML和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>

【讨论】：