Site logo

Archived topic

Scroll back to top button only when swipe down

3 replies · Started by jose on November 25, 2020

Viewing posts 1–4 of 4

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".

This archived topic is closed to new replies.