I created "Back-to-top" and "Go-to-bottom" buttons using HTML and CSS only as per different guidelines I found. I'm an amateur, so I thought this would be a simple fix.

As you can see (https://imthemoisturizer.com), the buttons are stuck on the lower-left corner of the website and, even though I've tried different solutions I can't seem to make them position themselves on the lower-right corner, one on top of the other. For simplicity, I'll just include the code for the "Back-to-top" button, since they're basically identical (except for where they link to).

HTML:

On header.php I created this div:

<div id="top"></div>

On footer.php I added this:

<a href="#top" ><img src="SVG image I want to show" alt="Boton subir" width="40" height="40"></a>

CSS:

This is the CSS code I included for positioning and appearance:

.top {
  --offset: 50px; 
  place-self: end;
  margin-top: calc(100vh   var(--offset));

  /* visual styling */
  background-color: #transparent;
  width: 50px; 
  height: 50px;
  text-align: center;
  position: sticky;
  bottom: 30px;
  left: 85%;
  right: 0px;
  transition: background-color .3s,     
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  color: #fff;
  border-radius: 100px;
  white-space: nowrap;
}

I'm out of solutions, so I really appreciate your help!

CodePudding user response：

Do you want it to stay always on bottom left corner? Try something like this:

.top {
    position: fixed;
    bottom: 25px;
    left: 25px;
}

CodePudding user response：

If you do not want the bottom button to be always there, please change the position: 'fixed' to position: 'absolute'

.top {
  right: 0;
  position: fixed;
  bottom: 0;
}
.fin{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99;
}

CodePudding user response：

<style>
 .top {
        display: inline-block;
          width: 50px;
          height: 50px;
          text-align: center;
          position: fixed;
          bottom: 30px;
          right: 30px;
          z-index: 1000; 
        }
</style>