带有指向上次查看页面的链接的浮动按钮答案

【问题标题】：Floating button with link to last viewed page带有指向上次查看页面的链接的浮动按钮
【发布时间】：2017-05-17 20:45:20
【问题描述】：

我想添加一个按钮，随着用户的滚动移动，或者卡在窗口底部。

我有几页说明（例如/georgia-insurance-license），其中包含指向其他帖子（例如How to Pass the Insurance Exam）的内部链接。

用户不必按下浏览器上的后退按钮，或者从导航导航两个步骤到他们的状态页面，如果有一个按钮单击将他们链接回他们的状态页面会更好来自。

如果能在手机上玩得很好，那就太好了。

如果您有粘性按钮的想法，请告诉我！

另外，我在 SquareSpace 上，如果这有什么不同的话。

谢谢！

【问题讨论】：

【解决方案1】：

听起来你会想要使用“固定”定位。

标记

<button class='special-button'>special button</button>

样式

.special-button {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
}

【讨论】：

酷，解决了按钮位置问题。您对如何让按钮链接回“状态页面”有任何想法吗？此外，他们可能会从“非州”页面导航到“如何通过考试”页面。有没有办法在访问期间将 cookie 保存给用户，将用户链接到他们首先选择的状态？
您可以使用普通的<a href='whatever-destination>state list</a> ~ 创建指向“列表”页面的链接，以及如何通过考试 - 以及任何和所有页面。我不确定 squarespace 中的链接是否是唯一的 - 或者您是否只是 HTML 新手。有一些方法可以创建一个 cookie 来显示他们选择的状态等 - 但 StackOverflow 不适用于一组问题 - 到目前为止，您还没有真正展示任何工作。我建议在 MDN 上了解“html 链接”“css 定位”和“cookies”。

【解决方案2】：

使用fixed 属性使其在滚动时移动。
并添加onclick="history.back(-1) 以返回一页。

.backBtn {
  position: fixed;
  left: 40%;
  top: 50%;
}

&lt;button class='backBtn' onclick="history.back(-1)"&gt;GO BACK! &lt;/button&gt;

【讨论】：