Buttons for Scrolling to the Top/Bottom of Topics

[piffy]

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

	Summary	Adds buttons that enable efficient jumping to the beginning/end of topics.
	Repository	GitHub - ScottMastro/discourse-jump-buttons · GitHub
	Install Guide	How to install a theme or theme component
	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:

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:

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:

Always visible when browsing a topic on a mobile device

---

[fbpbdmin (deepblue)]

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

[Aaron_Walsh]

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..

[fbpbdmin (deepblue)]

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

[Lilly (Lillian)]

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.

Understanding user interface elements in Discourse

This resource covers the names for each element of the Discourse user interface. Required user level: All users Here’s what Discourse’s interface looks like most of the time. Themes, theme components, and plugins may affect this layout. [Discourse Home Interface] Let’s break down the main parts, and then the main parts into smaller parts. [Discourse Home Interface Parts] Header Sidebar Main content Header [Header] Sidebar button/toggle (or Hamburge…

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.

Understanding Discourse for new users

This guide covers the fundamental features and basic usage of Discourse for new users, explaining key terms, how to navigate, participate in conversations, and configure notifications. Required user level: Any Welcome! As a new user of Discourse, we hope you will find this site intuitive and clearly structured. Here’s some guidance to help you get started: Summary This guide will cover: Basic terms used in Discourse Browsing and navigation tips Reading an…

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

[fbpbdmin (deepblue)]

@Lilly

I like the way this component buttons look in the default way they are laid out.

yes, like the default one too.

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

[Lilly (Lillian)]

@fbpbdmin

but users should not read a manual first either, haha.

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.

[Crius]

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.

[piffy]

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!

[Kartoon]

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

[piffy]

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

[piffy]

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.

---

https://github.com/discourse/discourse/pull/27408/files

app/assets/javascripts/discourse/app/controllers/topic.js

[Scott_Darnell]

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

[piffy]

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

[toanvoc (Toan Nguyen)]

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

[piffy]

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

[toanvoc (Toan Nguyen)]

I have updated the latest version!

[piffy]

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

[toanvoc (Toan Nguyen)]

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.

[piffy]

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!