0
I would like to create a button to go up to the top, but I would not like it to be always visible, only when the page reaches a certain part
1 answer
1
Here is an option made with jQuery
When the btn is $(this).scrollTop() > 160) it appears, when it is less than 160 from the top it hides. I left the comments in the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.go-top {
position: fixed;
bottom: 4.5rem;
right: 3rem;
display: none;
border: 60px solid transparent;
border-bottom-color: black;
z-index: 1100;
cursor: pointer;
}
</style>
</head>
<body>
<div style="height:1500px; width:100px"></div>
<div class="go-top"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
// esconde e mostra o btn
$(window).scroll(function() {
if ($(this).scrollTop() > 160) { // distancia que tem que rolar antes de aparecer
$('.go-top').fadeIn(250);
} else {
$('.go-top').fadeOut(250);
}
});
// manda pro topo
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 1200);
});
});
</script>
</body>
</html>-
I can put an image of an Arrow for example?
-
@Samuelnicolau o btn é uma div vc pode colocar o que quiser dentro até um vídeo rss. Mas já editei e fiz uma seta só com css para vc.
-
it’s not working here
-
@Samuelnicolau At the end of your page, you have to put jQuery
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>and right after that tab you open another tag<script> coloca o código </script>and inside vc puts the code that is at the beginning of the answer. Vc tb have to use the CSS that I used.go-top { estilos que estão na resposta } -
I put at the end of the page <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>,....... <script>Code here</script>....... and added CSS . go-top, and nothing done
-
@Samuelnicolau guy I put the whole document code, HTML etc. all. Save it in a file in your ai and test. It has to work. If it doesn’t work is because there’s something else in the document where you’re trying to put this code that’s interfering with btn’s behavior
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
Samuel right here on the site there are several questions like yours, for example this one: https://answall.com/questions/30703/volta-ao-homeda-p%C3%A1gina, gives a search. I’ll give you a heads-up if only with Html and Css it has to be with Javascript.
– LeAndrade
Possible duplicate of Back to Top of page
– LeAndrade
@Leandrade I answered but I didn’t even have eyes on the other one... it’s almost the same. I voted as Duplicata
– hugocsl
Blza @hugocsl, I in a quick search found some 3 similar.
– LeAndrade