如何修复占用整个页面宽度的固定链接？

Question

我有一个固定的锚标签链接到我网站上的标题。 这个锚标记有一个箭头图标，可以快速到达页面顶部。 我想 position 它在右下角，但链接在页面底部占据了整个宽度，除非我使用“width: fit-content;”。我尝试了所有显示选项，浮动仅适用于图标和不是链接。它使箭头图标浮动到我想要的 position，但链接宽度仍然占用所有页面宽度。有谁知道我如何修复链接的宽度和 position 它到右下角页？提前谢谢你。

注意-我正在使用 bootstrap 5

 #quick-anchor-top { font-size: 25px; padding: 15px 25px 15px 25px; border-radius: 50px; color: rgb(0, 0, 0); background-color: rgba(182, 20, 20, 0.800); transition: all 0.4s ease; margin: 20px; } #quick-anchor-top:hover { transition-duration: 0.4s; color: white; background-color: rgba(0, 0, 0, 0.800); }

 <a id="quick-anchor-top" href="#header-title-1" class="fixed-bottom float-end"> <i class="fa-solid fa-arrow-up"></i></a>

Answer 1

您可以使用预定义的 bootstrap 5 类到站点上的 position 个元素。 使用position-fixed和bottom-0 , end-0将元素设置到右下角。

只需像这样更改锚元素中的类：

<a id="quick-anchor-top" href="#header-title-1" class="position-fixed bottom-0 end-0"><i class="fa-solid fa-arrow-up"></i></a>

这是一个例子： https://jsfiddle.net/5j7do14t/

更多： https://getbootstrap.com/docs/5.0/utilities/position/

Answer 2

始终尝试共享您的完整代码，以便其他人可以更好地理解并以更快的方式帮助您。 正如我所看到的，您的代码缺少一个重要的点，即 position。

由于您没有分享完整的代码，我将尝试向您解释如何以一种非常简单的方式执行滚动回到顶部按钮。

首先，您需要按钮本身，其次，做您的样式，最后，处理滚动的 JavaScript 代码。

让我们开始吧。

1. 创建一个按钮，单击该按钮会将您带到页面顶部。

<button id="quickAnchorTop" title="Go to top"><i class="fa-solid fa-arrow-up"></i></button>

对于命名，最好使用 camelCase，因为您将在 CSS 和 JS 代码中使用它的 ID，因此我们可以调用您的按钮（quickAnchorTop 而不是 quick-anchor-top）。

2. 现在最重要的部分是 CSS 来设计你的按钮。

 
#quickAnchorTop {
  display: none;           /* It should be hidden by default */
  position: fixed;         /* Fixed/sticky position */
  bottom: 20px;            /* Place the button at the bottom of the page */
  right: 20px;             /* Place the button 20px from the right */
  z-index: 99;             /* Make sure it does not overlap */
  border: none;            /* Remove borders */
  outline: none;           /* Remove outline */
  background-color: blue;  /* Set a background color */
  color: white;            /* Text color */
  cursor: pointer;         /* Add a mouse pointer on hover */
  padding: 16px;           /* Some padding */
  border-radius: 10px;     /* Rounded corners */
  font-size: 18px;         /* Font size */
}

#quickAnchorTop:hover {
  background-color: #555;  /* Add a dark-grey background on hover */
}

3. 最后，使用 JavaScript 处理滚动并显示您的按钮。

 

// Get the button from the current page:
let myBackToTopButton = document.getElementById("quickAnchorTop");

// When you scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    myBackToTopButton .style.display = "block";  // To show your button
  } else {
    myBackToTopButton .style.display = "none";   // To hidd your button
  }
}

// When you click on the button, scroll to the top of the document
function topPageFunction() {
  document.body.scrollTop = 0;             // For Safari
  document.documentElement.scrollTop = 0;  // For Chrome, Firefox, IE and Opera
}

在上面的 JS 代码中，首先，您将通过您使用的 ID（quickAnchorTop）获得您的按钮，然后您将有一个 function 来处理滚动并显示或隐藏您的按钮。

现在确保更新您的按钮代码并使用此最终形式，因为您将 onclick 事件添加到您的按钮：

<button onclick="topPageFunction()" id="quickAnchorTop" title="Go to top"><i class="fa-solid fa-arrow-up"></i></button>

希望这会对您有所帮助。