I am currently working on implementing a "back to top" functionality in the SharePoint master page. The back to top feature itself is functional, however, I am encountering an issue with adding a class that will show or hide the icon based on page scroll. Below is the JavaScript code that I am using:
if ($('#back-to-top').length) {
var scrollTrigger = 100; // pixels
var backToTop = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > scrollTrigger) {
$('#back-to-top').addClass('show');
} else {
$('#back-to-top').removeClass('show');
}
};
$(window).on('scroll', function () {
backToTop();
});
$('#back-to-top').on('click', function (e) {
e.preventDefault();
$('#s4-workspace').animate({scrollTop: 0}, 700);
});
}
The following HTML code snippet has been added to the SharePoint master-page:
<a href="#" id="back-to-top" title="Back to top">↑</a>Current Issue: The icon is not visible on the page because the class 'show' is not being added during scrolling.