[Support request] Scroll back to top button only when swipe down

[jose]

How can I show ‘Scroll back to top button’ only when I swipe down in mobile or scroll down in browser.

[Elvin]

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.

[jose]

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.

[Elvin]

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

[Author]

Posts