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-scroll-buttons
	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 (bcqa)]

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 (bcqa)]

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]

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.

Names of user interface elements in Discourse

Here’s what Discourse’s interface looks like most of the time. [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 Hamburger) Logo Top right icons: a. Chat toggle b. Quick search c. Notifications Menu / Avatar menu Sidebar [Sidebar] Sections New Section Button Keyboard Shortcuts Main Content [Main Content] Navigation / Na…

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.

Discourse New User Guide

Welcome! As a new user of Discourse, we hope you will find this site intuitive and clearly structured, but here is some guidance to get you started: Basic Terms Used by Discourse (Nomenclature) Here are some very basic terms that will be helpful to keep in mind as you use Discourse or read this guide: Topic: The collection of messages grouped together in a meaningful conversation, with a title, listed in a category, beginning with an Original Post, and including all replies in chronologica…

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

[fbpbdmin (bcqa)]

@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]

@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!