let instance; document.addEventListener("DOMContentLoaded", function() { //The first argument are the elements to which the plugin shall be initialized //The second argument has to be at least a empty object or a object with your desired options instance = OverlayScrollbars(document.querySelectorAll('body'), { }); }); $(function() { var prevScrollpos = instance.scroll().position.y; const BackToTop = $('#return-to-top'); instance.options("callbacks.onScroll", function(e) { var currentScrollPos = instance.scroll().position.y; if (prevScrollpos > currentScrollPos) { //Scroll down $("#header").css({"top" : "0"}); } else { //Scroll up $("#header").css({"top" : "-50px"}); } if (currentScrollPos <= 50) { //Scroll down BackToTop.fadeOut(300); } else { //Scroll up BackToTop.fadeIn(300); } prevScrollpos = currentScrollPos; }); GoToTop = function() { instance.scroll({ y : "0%" }); $("#header").css({"top" : "0"}); BackToTop.fadeOut(300); } // Floating button functionality $('#return-to-top').click(function() { GoToTop(); }); });