Mixing
Go to top page button after scrolling down
Go to top page button after scrolling down
I created a method that go to the top of the page every time I click on it.
The problem is, I want this button to be shown only if you already scrolled down and not just as default. How can I define it? Here is my code:
show/hide the button - doesn't work:
scrollFunction() {
if (document.body.scrollTop > 5 || document.documentElement.scrollTop >5) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
scrolling to top - works:
topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0;
}
Thank you.
4 Answers
4
Try the following example to make a smooth transition:
$(document).scroll(function() {
if ($(this).scrollTop() >= 20) {
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
});
$('#return-to-top').click(function() {
$('body,html').animate({
scrollTop: 0
}, 500, 'swing');
});
#return-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: #777;
color: #fff;
cursor: pointer;
border-radius: 4px;
}
#return-to-top i {
color: #fff;
margin: 0;
position: relative;
font-size: 19px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
Example text Example text Example text Example text Example text Example text Example text Example text<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<a href="javascript:" id="return-to-top" class="btn btn-secondary">
<i class="fa fa-angle-up"></i>
</a>
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js
https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js
I use this code, just change the css to suit your needs.
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('#scroll').fadeIn();
} else {
$('#scroll').fadeOut();
}
});
$('#scroll').click(function() {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
});
#scroll {
position: fixed;
right: 10px;
bottom: 10px;
cursor: pointer;
width: 50px;
height: 50px;
background-color: #3498db;
text-indent: -9999px;
display: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#scroll span {
position: absolute;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -12px;
height: 0;
width: 0;
border: 8px solid transparent;
border-bottom-color: #ffffff
}
#scroll:hover {
background-color: #e74c3c;
opacity: 1;
filter: "alpha(opacity=100)";
-ms-filter: "alpha(opacity=100)";
}
<head>
<meta charset="utf-8">
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
</head>
<body>
<!-- BackToTop Button -->
<a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: none;">Top<span> </span></a>
<p>Example text</p>
<p>Example text</p>
<p>Example text</p>
<p>Example text</p>
<p>Example text</p>
<p>Example text</p>
<p>Example text</p>
<p>Example text</p>
<p>Example text</p>
<p>Example text</p>
<p>Example text</p>
<p>Example text</p>
</body>
You can make a scroll to top button like the example below:
$(document).ready(function() {
$('#autoScrl').hide();
$("div").scroll(function() {
$('#autoScrl').show();
});
});
function goToTop() {
document.getElementById('top').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'nearest'
});
setTimeout(function() {
$('#autoScrl').hide();
}, 1000);;
}
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
<html>
<head>
</head>
<body>
<p>Try the scrollbar in the div</p>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' vulnerable years my father gave me some advice that I've been turning over in my mind ever
since.
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' vulnerable years my father gave me some advice that I've been turning over in my mind ever
since.
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' vulnerable years my father gave me some advice that I've been turning over in my mind ever
since.
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' vulnerable years my father gave me some advice that I've been turning over in my mind ever
since.
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' vulnerable years my father gave me some advice that I've been turning over in my mind ever
since.
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' vulnerable years my father gave me some advice that I've been turning over in my mind ever
since.
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' vulnerable years my father gave me some advice that I've been turning over in my mind ever
since.
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' vulnerable years my father gave me some advice that I've been turning over in my mind ever
since.
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
<button id='autoScrl' onclick='goToTop()'>Go To Top</button>
</body>
</html>
Good answer, the only problem I found was it scrolled to the bottom of the main page while scrolling to the top of the snippet. Wouldn't this be an issue for some use-cases?
– Jake
Jun 29 at 0:35
I see that other answers are based on jQuery, but I suggest you to follow the "Angular way". In Angular you can listen to scroll event via (scroll)="handleScroll()" and get current offset from top via Math.abs(this.scroller.nativeElement.getBoundingClientRect().top) (getBoundingClientRect().top returns negative numbers, so we can get absolute values via Math.abs). Finally you should get something like this:
scroll
(scroll)="handleScroll()"
Math.abs(this.scroller.nativeElement.getBoundingClientRect().top)
getBoundingClientRect().top
Math.abs
HTML
COMPONENT And here is a working STACKBLITZ.
</div>
<button *ngIf="showButton" (click)="scrollToTop()">To top</button>@ViewChild('scrollWrapper') private scrollWrapper: ElementRef;
@ViewChild('scroller') private scroller: ElementRef;
public showButton: boolean = false;
public handleScroll(): void {
const offsetTop: number = Math.abs(this.scroller.nativeElement.getBoundingClientRect().top);
this.showButton = offsetTop > 5;
}
public scrollToTop(): void {
this.scrollWrapper.nativeElement.scrollTop = 0;
}
thanks for last comment the effect i want works... but the funcion itself now doesnt work? whats the code in angular for going to top of page?
– אוראל הינדי
Jun 29 at 9:34
@אוראלהינדי, I've updated the answer, check please
– Commercial Suicide
Jun 29 at 10:01
for some reason i cant make this work.. here my html:(appComponent):
– אוראל הינדי
Jun 29 at 13:38
Because you have to adapt it for your code, all that you need is to detect right element for scrolling
– Commercial Suicide
Jun 29 at 14:22
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
where on your code are you calling the scrollFunction() ??
– Teobis
Jun 29 at 0:09