[ANSWERED] html – how to place a fixed button inside a specific element

Question 1

A combination of position: sticky and a small change to your markup might work.

if you set .gotop to sticky and load it at the very bottom of your story. You can then force it to be stuck to the bottom by using bottom: 0

I use float here to push it to the right, which is pretty ugly. You can get rid if that if you use flex but I don’t know about the rest of your markup.

.story {
  position: relative;
  width: 50%;
  margin: 0 auto;
  height: 70vh;
  background: #ddd;
  overflow-y: auto;
}

.gotop {
  position: -webkit-sticky;
  position: sticky;
  float: right;
  margin-right: 10px;
  bottom: 0;
  padding: 14px 9px;
  background: gold;
  border-radius: 45% 45% 0 0;
  cursor: pointer;
}

<div class='story'>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <div class='gotop'>TOP</div>
</div>

Question 2

I’ve written my code here : https://jsfiddle.net/nbxcgdk9/

.story{
position: relative;
width: 50%;
margin: 0 auto;
height: 100vh;
background: blue;
overflow-y: scroll;
display: flex;
flex-direction: column;
justify-content: flex-end;
}

.gotop{
top: 100%;
margin-left: calc(100% - 50px);
bottom: 0;
width: 50px;
padding: 14px 9px;
background: gold;
border-radius: 45% 45% 0 0;
cursor: pointer;}

Style as per convenience 🙂

Question 3

I need a button to scroll story to top when clicked.
But I need it inside the story, not outside.
Also, it must not be scrollable, so positioned fixed.
But if it is fixed – how to place it inside story, i.e. 14 px from right border of story?

.story{
position:relative;
width:50%;
margin:0 auto;
height:100vh;
background:#ddd;
overflow-y:scroll;
}

.gotop{
position:fixed;
right:14px;
bottom:0;
padding:14px 9px;
background:gold;
border-radius:45% 45% 0 0;
cursor:pointer;
}

<div class='story'>
<div class='gotop'>TOP</div>
</div>

Bollate

[ANSWERED] html – how to place a fixed button inside a specific element

By

Solution 1 :

Solution 2 :

Problem :

By

Related Post

[ANSWERED] problem in selecting list item in html/css

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – Trying to align a div to the right using CSS

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate