Buttons for Scrolling to the Top/Bottom of Topics

Theme component
1

Background

Navigating my forum requires a lot of jumping between the top and bottom of topics. This theme component makes that easier by placing visible jump buttons on topic pages.

How to install
:information_source: Summary Adds buttons that enable efficient jumping to the beginning/end of topics.
:hammer_and_wrench: Repository GitHub - ScottMastro/discourse-scroll-buttons
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

What it does

Buttons are placed in three different places and can be made visible/invisible by toggling the cooresponding settings. Issues or bug reports are welcome.

timeline buttons enabled:

image
image452×1082 12.4 KB

This is slightly redundant with clicking on the dates at the top/bottom of the timeline but in my experience, that feature is mostly unknown to users without explicitly telling them.

jump button enabled:

image
image1242×270 24.4 KB

Adds a “Jump” button at the bottom of the page to bring you back to the top. Text and hover info of the button can be changed in the component settings

mobile buttons enabled:

image

Always visible when browsing a topic on a mobile device

11 Likes
2

it might look nicer if move these two buttons to the left/right of the timestamps on the time slider ?

image

1 Like
3

personally this way… i think consumers will get confused with it being this way as they will think it is a scroll button more than a “Jump” button which is is entended for…

1 Like
4

or this way, haha,
seems this makes it too crowded

this is an interesting design question, how to let users to realize the functions without making the UI too busy :slight_smile:

image
image318×854 11.2 KB

1 Like
5

I like the way this component buttons look in the default way they are laid out. Perhaps one could fork the repo and make their own changes or make a PR?

It is also a good idea to have your own copy of the guide to basic interface elements to refer your users to. I believe the guide needs more details and hope to make this happen. :slight_smile:

The timeline scroll should have more details about the functionality. There is a bit of info in the user guide but these documents could be linked better with more details.

I just usually tell my users that almost everything in the Discourse UI is clickable. :grin:

6

yes, like the default one too.

adding buttons make the UI too busy…
but users should not read a manual first either, haha.

1 Like
7

Oh I realize that, I just like having a reference to point to when they ask. And also the search will be able to find it on your local forum if you have guides posted in a help desk category for example.

8

I am getting this notice in the developer console, related to this recent change

[THEME 17 ‘discourse-scroll-buttons’] Deprecation notice: Importing getOwner from discourse-common/lib/get-owner is deprecated. Use import { getOwner } from '@ember/application', or if you still need the fallback shim, use import { getOwnerWithFallback } from 'discourse-common/lib/get-owner';. [deprecated since Discourse 3.2] [deprecation id: discourse.get-owner-with-fallback]

Any chance of an update? It’s a really useful component for mobile view.

1 Like
9

Should be fixed. I replaced this line

const topicController = getOwner(this).lookup("controller:topic");

with this

const container = Discourse.__container__;
const topicController = container.lookup('controller:topic');

Following the sample code from here Get Category Name using JS - #2 by awesomerobot

I’m glad you find it useful!

2 Likes
10

I don’t know if it’s just my site or what but the down button has stopped doing anything (not sure when it stopped, couple weeks at least). The bottom one still works normally

11

Desktop or mobile? There are no problems on my end.

12

Ok I updated Discourse today and I see what you mean. It looks like this change below broke it, because jumpTop requires the click event to be passed.

I made changes to the theme component. It works for me now, hopefully it fixes it for you too.

image

2 Likes
13

Latest Discourse update flagged this and disabled it. Any chance an update could be made?

1 Like
14

Thanks for the report. Just pushed a fix, let me know if the problem persists!

1 Like
15

The down button (down arrow) on mobile of this plugin is broken on Safari of iphone. Hope it will be fixed in the new update version

16

Do you have the newest version? that’s the regression I fixed 6 days ago

17

I have updated the latest version!

18

You updated and it works now? Or you updated and you still have the down arrow issue?

19

I updated this components to the latest version and tested it again on my iPhone using incognito Safari browser but still the Down Arrow doesn’t work.

20

Ok, I had time to look. Seems like I didn’t update the mobile function (thought I did).

Current version should hopefully work. Let me know if problem persists!

2 Likes