Scroll to top button visible only when scrolled down

Design help General
1

Hi there!

I was trying to make a button to scroll to top of the page visible on the bottom of the page only when scrolled past certain section. I’ve created a link block with fixed positioning, but this makes the div always in page, so can’t assign an interaction on scroll (because I can’t scroll past the element as the element is fixed).

Am I missing something? In case it can’t be implemented using only the editor, is there a way to do it with javascript using the webflow.js api/libs included in the template?

Thank you!

2

I’ve found the solution by myself. It seems not possible to do it with the editor only, so I’ve used a couple of jquery functions. this is the code I’m using:

<script>
    $(document).ready(function(){

	var elm_class = '.gotop'; // Adjust this accordingly. 

	//Check to see if the window is top if not then display button
	$(window).scroll(function(){
		if ($(this).scrollTop() > 300) { // 300px from top
			$(elm_class).fadeIn();
		} else {
			$(elm_class).fadeOut();
		}
	});
	
	//Click event to scroll to top
	$(elm_class).click(function(){
		$('html, body').animate({scrollTop : 0},800);
		return false;
	});
	
});
</script>

So, just add an element to the body, set a class, set it to fixed position and the paste the code to Custom Code section, on project properties. Adjust the class name .gotop accordingly.

1 Like
3

Nice one! Thanks for sharing this. :smile: