Question 14467 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can't position "back to top" button – WordPress

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" class="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!

Tags:

3

Answers


  1. 0

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

    .bottom-right {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 900;
}

    or just add to style attribute

    <div style="position: fixed; top: 25px; left: 25px; z-index: 900">
  top left
</div>
<div style="position: fixed; top: 25px; right: 25px; z-index: 900">
  top right
</div>
<div style="position: fixed; bottom: 25px; left: 25px; z-index: 900">
  bottom left
</div>
<div style="position: fixed; bottom: 25px; right: 25px; z-index: 900">
  bottom right
</div>

    also consider adding z-index if some other components are hiding these. Often dialogs by UI libs are placed at ±1000 of z-index, so added 900.

    added divs to your site, here is screenshot. With CSS there may be overriding css rules etc. while code is tiny in this case and only used by this element, i would not worry to add inline style:

    enter image description here

    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
  3. 0

    You could wrap both buttons in a a parent div and give this wrapper a fixed position.

    Both <a> will be on top of each other if you set a display:block display property.

    Example

    html {
  scroll-behavior: smooth;
}

.content{
  width: 50%;
  font-size:5vw;
}

.nav-vertical{
  position:fixed;
  bottom:1em;
  right:1em;
}

.btn-nav-vertical{
  display:block
}
    <div class="nav-vertical">
  <a href="#top" class="btn-nav-vertical top">
    <img class=" lazyloaded" src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Top.svg" data-src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Top.svg" alt="Boton subir" width="40" height="40">
  </a>
  <a href="#fin" class="btn-nav-vertical fin">
    <img class=" lazyloaded" src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Bottom.svg" data-src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Bottom.svg" alt="Boton bajada" width="40" height="40">
  </a>
</div>

<div class="content">
  <div id="top"></div>
  <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</p>

  <p>"What's happened to me? " he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.</p>

  <p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was something he was unable to do because he was used to sleeping on his right, and in his present state couldn't get into that position.</p>

  <p>However hard he threw himself onto his right, he always rolled back to where he was. He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering legs, and only stopped when he began to feel a mild, dull pain there that he had never felt before. "Oh, God", he thought, "what a strenuous career it is that I've chosen! Travelling day in and day out.</p>

  <p>Doing business like this takes much more effort than doing your own business at home, and on top of that there's the curse of travelling, worries about making train connections, bad and irregular food, contact with different people all the time so that you can never get to know anyone or become friendly with them. It can all go to Hell! " He felt a slight itch up on his belly; pushed himself slowly up on his back towards the headboard so that he could lift his head better; found where the itch was, and saw that it was covered with lots of little white spots which he didn't know what to make of; and when he tried to feel the place with one of his legs he drew it quickly back because as soon as he touched it he was overcome by a cold shudder. He slid back into his former position. "Getting up early all the time", he thought, "it makes you stupid. You've got</p>

  <div id="fin"></div>

</div>

    You can also add scroll-behaviour:smooth.
    This way you get a nice smooth scrolling effect.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search