Archived topic
Scroll back to top button only when swipe down
3 replies · Started by jose on November 25, 2020
How can I show 'Scroll back to top button' only when I swipe down in mobile or scroll down in browser.
Hi,
This is the default behavior of the back to top button GeneratePress adds when you enable it from Appearance > Customize > Layout > Footer.
Does it behave differently on your site? Can you link us to the site in question? Thank you.
If you are on the bottom of the page and swipe up, the ‘Scroll back to top button’ is stil there.
So I want to show the ‘Scroll back to top button’ only If I swipe down, no when I swipe up.
Ah right.
You can try this script:
<script>
var backToTop = document.querySelector("a.generate-back-to-top");
// Initial state
var scrollPos = 0;
// adding scroll event
window.addEventListener('scroll', function(){
// detects new state and compares it with the new one
if ((document.body.getBoundingClientRect()).top > scrollPos) {
backToTop.style.display = "none";
console.log('swipe down');
} else{
backToTop.style.display = "block";
console.log('swipe up');
}
// saves the new position for iteration.
scrollPos = (document.body.getBoundingClientRect()).top;
});
</script>
Add this on a Hook Element. Set the hook to wp_footer and set the Display rule location to "Entire Site".