How to fix fixed link taking up full width of page? - html

Question

I have a fixed anchor tag linked to a heading on my website. This anchor tag has an arrow icon that is meant to be a quick way to get to the top of the page. I wanted to position it at the bottom right, but the link is taking up full width at the bottom of the page unless I use "width: fit-content;'. I tried all the display options and float only works on the icon and not the link. It makes the arrow icon float to the position I want but the link width is still taking up all the pages width. Does anyone know how I can fix the width of the link and position it to the bottom right side of the page? Thank you in advance.
NOTE-
I am using 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

You can use predefined bootstrap 5 classes to position elements on the site. Use position-fixed and bottom-0, end-0 to set your element to the bottom right corner.
Just change your classes in the anchor element like this:
<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>
Here is an example: https://jsfiddle.net/5j7do14t/
More: https://getbootstrap.com/docs/5.0/utilities/position/

Answer 2

Always try to share your full code so others can understand better and help you in a faster way. As I can see your code is missing an important point which is the position.
Since you didn't share the full code I will try to explain to you how to do a Scroll back to top button in a very easy way.
First of all, you need the button itself, and secondly, do your style, and finally, the JavaScript code that will handle the scroll.
So let's start.
1. Create the button that will take you to the top of the page when clicked on.
<button id="quickAnchorTop" title="Go to top"><i class="fa-solid fa-arrow-up"></i></button>
For the naming, it's better to use the camelCase since you will use its ID in the CSS and in the JS code, so we can call your button (quickAnchorTop instead of quick-anchor-top).
2. Now the most important part, is the CSS to style your button.
#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. Finally, use JavaScript to handle the scroll and show your button.
// 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
}
In the above JS code, first, you will get your button by the ID you used which is (quickAnchorTop), then you will have a function to handle the scroll and to show or hide your button.
Now make sure to update your button code and use this final form as you added the onclick event to your button:
<button onclick="topPageFunction()" id="quickAnchorTop" title="Go to top"><i class="fa-solid fa-arrow-up"></i></button>
Hopefully this will help you.