"Dynamic" back to top button


I found this from Duncan:

  • add a full width box and make it transparent
  • add a button with an up arrow to the page
  • group those
  • make the group fixed to the browser bottom
  • make the button’s on click action go to the page top

This button would now be permanently visible. Is there a way to animate this button so that it only appears when the visitor scrolls up?

You can’t achieve this effect with a fixed popup, can you?

And you have to insert an anchor (at the top) on all pages. Right?

Mr. F.

Hi there,

I’m sure the opacity in animate while scrolling will do the job.

I just created a button for you. you can of course go ahead and edit the way you like it.

fix to the browser bottom,
and I gave the link to the icon (not to the group),
and you’ll see how I set the opacity.
you don’t need to use anchor, just set it as the page top. I would say just show it on all pages to make it easier but instead copy and paste it to every page but then change the page from dropdown according to what page it is on while keeping the “page top” option. Leaving the wetransfer link down below. hope it helps.

1 Like

Hi matt.

Nice. Thank you.
I will try it out with different settings.

Mr. F.

It’s not exactly what i want to achieve.
The effect can bee seen here: https://www.n-tv.de
When you scroll down, nothing will appear. But as soon as you scroll back to the top, the button fades in.
Could that be done with sparkle?

1 Like


Instead of linking to the same page and “top of the page” i tried:
external link with # as URL.

I hope that will work on all pages. In preview mode it works.

Mr. F.

1 Like

You can do it with a javascript command. If you’re not familiar with coding, it will be very complicated. I would suggest you to stick Sparkle’s built in JS engines for now. :slight_smile: maybe in the future, if “based on scroll direction” feature comes up, it’d be possible. Otherwise I haven’t come across any option like that.

1 Like


As it seems, I am too stupid for this animation.

The button is supposed to show up only when, for example, the page has been scrolled down 60% and is supposed to stay there until the end.

I just can’t get this to work.

I have set a transparent box + icon as a group (fix to browser bottom). The animation is then done on the group. How do I have to set the values?

Any help is appreciated :grin:

Mr. F.


I think I have made a mistake in thinking or logic here: bottom of browser is not bottom of page.

So, the animation is in relation to the browser window, not matter how long or short the page is.

I could place this button on each and every page, near the end and animate it there when it comes into play. Too much work.

Mr. F.

@Mr_Fozzie, from my understanding and what I have seen on the website you exampled, Sparkle can’t do that action. But I must add it is a very strange action…

It seems far more logical that either the “back to top” button is already visible on the bottom of the web page, or as you scroll towards the bottom a “back to top” button appears. In both cases it is alerting the User about the action as they come to the bottom of the web page.

Starting your scrolling back up, because there is no visible action of a “back to top” button, most would not be looking for an action that wasn’t there, so for me this action exampled defeats the purpose.