我怎样才能在屏幕的右下角准确地设置跳转按钮？ [复制]答案

【问题标题】：How can I pose jump up button exactly at the right bottom of the screen? [duplicate]我怎样才能在屏幕的右下角准确地设置跳转按钮？ [复制]
【发布时间】：2020-01-12 13:26:59
【问题描述】：

我定义了一个向上跳转按钮，这样一来，他就可以在不滚动顶部的情况下回到屏幕顶部。但它恰好位于屏幕的中间。我希望它位于右下角，并在一个人下到屏幕时出现。

【问题讨论】：

标签： html css

【解决方案1】：

如果您将代码与问题一起发布，那么回答这个问题会容易得多。
您可以尝试几种方法来实现此目的，它们的实用性可能会因您在网页中执行的其他操作而异。
首先，如果您确定您的内容将超过窗口的长度，只需将按钮放在 body 元素的最底部，然后用text-align: right 包裹在<div> 中。 CSS：

.btn {
  text-align: right;
}

HTML：

<div class="btn">
  <button>Scroll up</button>
</div>

如果您不确定内容的长度，您可以尝试以下方法：在包裹整个页面的容器上使用 position: relative，并使用 height: 100vh 确保它填满整个视口。然后使用position: absolute 让按钮粘在右下角。
这是 CSS：

.container {
  position: relative;
  height: 100vh;
}

button {
  position: absolute;
  bottom: 0;
  right: 0;
}

这是 HTML：

<div class="container">
  <div>
    <!-- all your content -->
  </div>
  <button>Scroll to top!</button>
</div>

如果这些对您没有帮助，请发布您的代码（HTML 和 CSS），以便更容易为您提供帮助。
祝你好运！

【讨论】：