Streaming live at 10am (PST)

Scroll to top button visible only when scrolled down

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!

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:


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

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

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

Nice one! Thanks for sharing this. :smile: