返回顶部组件

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

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!

27 个赞

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

10 个赞

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

6 个赞

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 个赞

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 个赞

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

1 个赞

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 个赞

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 个赞

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 个赞

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 个赞

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 个赞

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 个赞

@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 个赞

作为 Discourse 的所有者,团队认为标准功能应当被教授,这是正确的。

但作为论坛所有者,您为用户创建这个功能也是对的。它既更容易查看,也更容易使用。而且它与您网站风格的搭配也很好看,这比我之前访问时改进了很多。: +1:

2 个赞

而我当时正在把大家的 PC 从双击改为单击——为了保护他们的关节(并避免患上腕管综合征)。既然 50 万次点击就足够了,何必点击 100 万次呢?直到 Windows 3.1 刚推出时,我测试了一下,才不得不进行双击操作。一小时后,我就切换回 DOS,使用我安装并配置的 DOS 菜单。此后唯一双击的情况,就是当我出现神经抽搐时。:wink:

3 个赞

太棒了,David,干得漂亮!

4 个赞