I have a button to go up to the top of the page which is in a fixed position at the bottom of the screen. I would like it to be able to stop above the footer (currently the two are overlapped which is ugly).
I'd like to do this without js, so i've tried several configs with the sticky position but nothing works.
My page : https://jsfiddle.net/eqy3corh/
html,
body {
height: 100%;
}
p {
font-size: 2em;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
position: relative;
display: flex;
flex-direction: column;
}
main {
padding: 0 3rem;
outline: 1px solid black;
background-color: red;
flex: 1 0 auto;
padding-top: 2em !important;
padding: 5em;
}
footer {
outline: 1px solid black;
flex-shrink: 0;
background-color: yellow;
}
footer * {
text-align: center;
color: rgb(16, 16, 16);
background-color: yellow;
}
.top {
position: fixed;
bottom: 0.7em;
right: 0.7em;
background: green;
padding: 0.5em;
border-radius: 50%;
}
/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
@media screen and (prefers-reduced-motion: no-preference) {
html,
body {
scroll-behavior: smooth;
}
}<!doctype HTML>
<html lang="en">
<head>
<title>test</title>
<link rel="stylesheet" href="normalize.min.css" media="all">
<link rel="stylesheet" href="test.css" media="screen">
</head>
<body>
<main>
<a href="#top"><img src="top.png" class="top"></a>
<div class="text_container top">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada fames. Id consectetur purus ut faucibus pulvinar. Aliquam faucibus purus in massa. Nec dui nunc
mattis enim. Volutpat consequat mauris nunc congue nisi. Volutpat odio facilisis mauris sit amet massa vitae tortor. In nisl nisi scelerisque eu ultrices vitae auctor. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit
scelerisque. Euismod nisi porta lorem mollis aliquam. Scelerisque purus semper eget duis. Ut placerat orci nulla pellentesque dignissim enim sit. Aliquam ut porttitor leo a diam sollicitudin. Eleifend mi in nulla posuere sollicitudin aliquam
ultrices sagittis.
</p>
<p>Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ut placerat orci nulla pellentesque dignissim enim sit amet. Eu non diam phasellus vestibulum lorem sed risus ultricies. Fames ac turpis egestas sed tempus urna et pharetra.
Vulputate ut pharetra sit amet. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. In massa tempor nec feugiat nisl pretium. Morbi quis commodo odio aenean. Mattis vulputate enim nulla aliquet porttitor lacus luctus
accumsan. Bibendum neque egestas congue quisque egestas. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Posuere sollicitudin aliquam ultrices sagittis orci. Tincidunt tortor aliquam nulla facilisi. Non arcu
risus quis varius. Consequat nisl vel pretium lectus quam id. Sodales ut etiam sit amet nisl purus in mollis. Dictum non consectetur a erat nam at lectus urna. Id consectetur purus ut faucibus. Mi bibendum neque egestas congue quisque
egestas diam. Rhoncus mattis rhoncus urna neque viverra justo.
</p>
<p>
Aenean pharetra magna ac placerat vestibulum lectus mauris. Mauris vitae ultricies leo integer malesuada nunc vel. Neque volutpat ac tincidunt vitae semper quis. Diam in arcu cursus euismod quis. Viverra orci sagittis eu volutpat odio facilisis mauris
sit amet. Quam nulla porttitor massa id neque. Cras adipiscing enim eu turpis. Volutpat maecenas volutpat blandit aliquam etiam. Elit pellentesque habitant morbi tristique senectus. Tristique magna sit amet purus gravida. Etiam erat velit
scelerisque in dictum. Bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Et odio pellentesque diam volutpat commodo. Laoreet suspendisse
interdum consectetur libero id faucibus nisl tincidunt.
</p>
<p>
At elementum eu facilisis sed. Enim praesent elementum facilisis leo vel. Bibendum neque egestas congue quisque egestas. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Orci porta non pulvinar neque laoreet suspendisse interdum. Cursus
risus at ultrices mi. Ut morbi tincidunt augue interdum velit euismod. Pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies. Fermentum et sollicitudin ac orci phasellus. Risus nullam eget felis eget nunc. Vivamus at augue
eget arcu dictum varius duis at consectetur. Auctor eu augue ut lectus arcu bibendum at varius vel. Egestas dui id ornare arcu odio. Mauris a diam maecenas sed enim ut sem viverra. Mauris augue neque gravida in fermentum et. Magna ac placerat
vestibulum lectus mauris ultrices eros in. Diam phasellus vestibulum lorem sed. In fermentum et sollicitudin ac orci phasellus egestas.
</p>
</div>
</main>
</body>
<footer class="footer">
<div class="footer_content">
<p>
Source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. Content is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
</p>
</div>
</footer>
</html>