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

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? - #576 by Neil - general - 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.

https://www.macobserver.com/tips/quick-tip/return-to-top-ios-iphone-scroll/

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개의 좋아요

디스커스 소유자로서, 팀이 표준 기능을 사용하도록 교육해야 한다는 지적은 정확합니다.

하지만 포럼 운영자로서 사용자를 위해 이 기능을 만든 것은 옳은 판단입니다. 보기에도 더 편하고, 사용하기도 더 쉽습니다. 또한 이전 방문 때보다 훨씬 개선된 사이트 스타일과도 잘 어울립니다. :+1:

2개의 좋아요

그때 저는 모든 사람의 PC를 더블클릭에서 싱글클릭으로 변경하고 있었어요. 손목 관절을 보호하기 위해서(그리고 CT를 피하기 위해서)였죠. 50만 번이면 충분할 때 왜 100만 번을 클릭해야 하죠? WIN 3.1이 처음 출시되었을 때 테스트를 해보면서야 비로소 더블클릭을 하게 되었어요. 한 시간 정도 지나면 다시 DOS로 돌아가서 제가 설치하고 설정해 둔 DOS 메뉴를 사용했죠. 그 이후로 더블클릭을 한 적은 신경이 떨릴 때뿐이었어요. :wink:

3개의 좋아요

대卫, 정말 좋아! 잘했어!

4개의 좋아요