I recently tried my hand at creating a simple Back-To-Top button that appears when the page is scrolled past a certain point. I used jQuery
$(document).ready(function () {
$(window).scroll(function() {
if ($(this).scrollTop() > offset) {
$('.back-to-top-button').fadeIn(200);
} else {
$('.back-to-top-button').fadeOut(200);
}
});
});
/*Scroll Plugin*/
$('.back-to-top-button').click(function(event) {
$('html, body').animate({scrollTop: 0}, 'slow');
event.preventDefault();
});
This is how I implemented it in the HTML
<a href="#" class="back-to-top-button" style="display: inline;">
<i class="fa fa-chevron-circle-up"></i>
</a>
However, I encountered an issue where instead of smoothly scrolling back to the top, the page jumps abruptly. Strangely, this problem only occurs on my website and not others I have tested it on.