Scroll to Top Component

This is a simple theme component that adds a scroll to top button in the lower left corner when you scroll down a page. It’s a much quicker and easier way to get to the top rather than using the timeline in my opinion. It only displays once you scroll down the page.

Repository link
https://github.com/davidkingham/Scroll-to-Top

Live Preview:
https://theme-creator.discourse.org/theme/davidkingham/scroll-to-top

Samples

image

How do I install this theme component?

Follow the theme installation guide and add the theme component to your active themes.

If you’re new to Discourse themes, you can learn more about them here.

Limitations
If you visit a long post and you didn’t start at the beginning (viewing the latest unread post for example), it will not scroll all the way to the top because the entire page is not loaded.

This is my first theme component so the I’m sure the code is a bit sloppy compared to most. PR’s welcome to help improve it!

26 Likes

Note that you do not need to use the timeline, just tap the topic title to jump to the top at any time.

10 Likes

Good point, but not a feature most users (at least on my forum) will discover unfortunately.

6 Likes

It’s a bit bugged: in mega long threads, say if i’m at post 666 and click the button, it only takes me about 20 posts up (to post 640), not to post number one.

test here: What happens when a topic has over 1000 replies? - general - Discourse Theme Creator

Later edit: i don’t know how to add the link to the theme preview and the particular topic at the same time, so you will have to search for the long thread by hand.

Wow. So obvious. But it never occurred to me.

9 Likes

Yup, this is noted under limitations. A better approach could be using the current topic url like the topic title does but I’m not sure how to achieve that, any ideas would be appreciated.

See, even the mighty Jay didn’t discover this! :smiley:

2 Likes

Oh my, i just tested the component and didn’t read anything else in OP. My bad :blush:

1 Like

If you or anyone you know uses iOS devices, they know this, because “tap the top to jump to top” has been a built in function on all iOS devices for quite a few years now.

Maybe your users are all Android users, somehow? :thinking:

Anyways, yeah, just click the topic title to jump to the top. Easy and works everywhere on every Discourse instance ever created with zero special install or config required… desktop, laptop, tablet, mobile.

6 Likes

Neat trick, if only people knew it was there…

I consider myself quite adept at iOS and have been known to read articles to find all the tricks, I was pissed when they took away the long press swipe to switch applications for example (so glad it’s back), but I had no idea this existed. I would venture to guess only a tiny minority of users know this. My audience is largely middle aged to older with most of them not being technologically advanced in any way. So I gave them a button to push that is pretty obvious what it does. :man_shrugging:

How do people learn to double-click the mouse? :thinking:

It is certainly not immediately evident by looking at a mouse that clicking twice in rapid sequence does anything, or that you should even try to do so?

(on mobile, the example would be tap-and-hold.)

You are conflating usability with learnability here.

I do remember teaching people just that. It was in 1988.

2 Likes

Right, so teach them the technique that works everywhere, on every Discourse instance ever :wink:

Not opposed to this component, but as they say, give a man a :fish: and he eats today, but teach a man to :fish: and he’ll never go hungry again …

6 Likes

Sad thing is that “tap to go to top of timeline” is a widely accepted convention. Lots of the apps I use have it from Reddit, Feedly and Twitter to certain mail clients.

It’s not abstract in the same sense as force-touch.

2 Likes

I would argue this is not a fair comparison, double click was a fundamental part of using windows in the early days, it had to be learned or you couldn’t progress. This is just a little hidden feature that 99% of people will never use or discover because they can just scroll to the top manually. Even after I read that article it took me a second to figure out how it works because in safari you have to tap twice, once to bring the address bar up, then the top tap works. I don’t think this is discoverable or intuitive at all.

Maybe over time it will get better and this will become common knowledge, but right now it is not. I’m not going to educate every single new user on something silly like this. I’ll be keeping the button for now :wink:

3 Likes

It is fine to have the button, but it is also good to teach the broader convention which can help people on sites outside of yours… including all other Discourse sites, and all iOS devices…

7 Likes

@davidkingham In the sample image the scroll to top button is yellow which led me to believe that it adapts to a dark theme. However after installing this component and reviewing the source it seems this is not the case – it’s just white across all themes.

How can I adjust the color of the button based on the theme? Is this possible?

I knew I forgot something, I just commited a fix for this if you update the component it will use the quaternary color for the button and secondary for the chevron.

4 Likes

As Discourse owners, the team are correct that the standard feature should be taught.

But, as the forum owner, you are right to create this for your users. It is both easier to see and easier to use. Plus it looks good with your site style which is much improved from the other times I visited. :+1:

2 Likes

And here I was changing everyone’s PCs from double-click to single-click - to save their joints (and from getting CT). Why click 1M times when 500k would do? It was only when WIN3.1 first came out and I tested that, was when I double-clicked. After an hour, I’d switch back over to DOS and use the DOS menu I had installed and configured. The only time I double-clicked since is if I had a nerve twitch. :wink:

3 Likes

Love it David, great job!

4 Likes