# Buttons for Scrolling to the Top/Bottom of Topics

**URL:** https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412
**Category:** Theme component
**Created:** [September 29, 2022, 5:50pm UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412 "2022-09-29T17:50:09Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![piffy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piffy/32/254198_2.png) [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [September 29, 2022, 5:50pm UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/1 "2022-09-29T17:50:10Z")

</div>

## 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](https://github.com/ScottMastro/discourse-scroll-buttons) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

## 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](https://global.discourse-cdn.com/meta/original/4X/1/3/8/1384901ed6b0685b25b804910f885fe1031fa00e.png)

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](https://global.discourse-cdn.com/meta/original/4X/0/0/2/002bf1551b54062c8412415392c62676679df48c.png)

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](https://global.discourse-cdn.com/meta/original/4X/a/c/0/ac0af9368ce8f26a0c16f29b5cd1ec0f8475587a.png)

Always visible when browsing a topic on a mobile device

* * *

---

<div class="post-metadata">

### Author: ![fbpbdmin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fbpbdmin/32/300893_2.png) [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [September 3, 2023, 6:26pm UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/2 "2023-09-03T18:26:27Z")

</div>

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

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/0/2/f026d65538dc02831d0e44d96c5055e859e5baed.png)

---

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [September 3, 2023, 6:29pm UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/3 "2023-09-03T18:29:39Z")

</div>

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

---

<div class="post-metadata">

### Author: ![fbpbdmin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fbpbdmin/32/300893_2.png) [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [September 3, 2023, 6:36pm UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/4 "2023-09-03T18:36:55Z")

</div>

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 🙂

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/7/2/e72cb7d74e5ce49262c9ae4c5156cb23bce4ce39.png)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 3, 2023, 6:37pm UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/5 "2023-09-03T18:37:26Z")

</div>

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](https://meta.discourse.org/t/interface-nomenclature-guide/103351#topic-4):
>
> bookmark This resource covers the names for each element of the Discourse user interface. person_raising_hand 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. Let’s break down the main parts, and then the main parts into smaller 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](https://meta.discourse.org/t/discourse-new-user-guide/96331#navigation-tools-5) but these documents could be linked better with more details.

> [@Understanding Discourse for new users](https://meta.discourse.org/t/discourse-new-user-guide/96331#navigation-tools-5):
>
> bookmark 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. person_raising_hand 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. 😁

---

<div class="post-metadata">

### Author: ![fbpbdmin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fbpbdmin/32/300893_2.png) [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [September 3, 2023, 6:52pm UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/6 "2023-09-03T18:52:00Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 3, 2023, 6:55pm UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/7 "2023-09-03T18:55:25Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Crius](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/crius/32/317214_2.png) [@Crius](https://meta.discourse.org/u/Crius)
#### Post date: [January 8, 2024, 4:13pm UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/8 "2024-01-08T16:13:22Z")

</div>

I am getting this notice in the developer console, related to this [recent change](https://meta.discourse.org/t/preparing-for-discourses-upgrade-to-ember-5/287211)

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

---

<div class="post-metadata">

### Author: ![piffy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piffy/32/254198_2.png) [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [January 8, 2024, 4:34pm UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/9 "2024-01-08T16:34:40Z")

</div>

Should be fixed. I replaced this line

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

```

with this

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

```

Following the sample code from here [Get Category Name using JS - #2 by awesomerobot](https://meta.discourse.org/t/get-category-name-using-js/177110/2)

I’m glad you find it useful!

---

<div class="post-metadata">

### Author: ![Kartoon](https://avatars.discourse-cdn.com/v4/letter/k/e36b37/32.png) [@Kartoon](https://meta.discourse.org/u/Kartoon)
#### Post date: [June 17, 2024, 4:57am UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/10 "2024-06-17T04:57:51Z")

</div>

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

---

<div class="post-metadata">

### Author: ![piffy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piffy/32/254198_2.png) [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [June 17, 2024, 5:41am UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/11 "2024-06-17T05:41:06Z")

</div>

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

---

<div class="post-metadata">

### Author: ![piffy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piffy/32/254198_2.png) [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [June 17, 2024, 10:36pm UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/12 "2024-06-17T22:36:17Z")

</div>

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](https://github.com/discourse/discourse/pull/27408/files)

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/6/7/0676c8da81e4713477fef67831ca5b500a5ae0bb.png)

> <https://github.com/discourse/discourse/blob/0a881a59d3adace4bc19f86eb3a346c02bcdcc6d/app/assets/javascripts/discourse/app/controllers/topic.js#L342>

---

<div class="post-metadata">

### Author: ![Scott\_Darnell](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/scott_darnell/32/364360_2.png) [@Scott\_Darnell](https://meta.discourse.org/u/Scott_Darnell)
#### Post date: [August 31, 2024, 1:00am UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/13 "2024-08-31T01:00:20Z")

</div>

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

---

<div class="post-metadata">

### Author: ![piffy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piffy/32/254198_2.png) [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [September 3, 2024, 7:29am UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/14 "2024-09-03T07:29:50Z")

</div>

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

---

<div class="post-metadata">

### Author: ![toanvoc](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toanvoc/32/423586_2.png) [@toanvoc](https://meta.discourse.org/u/toanvoc)
#### Post date: [September 9, 2024, 5:24am UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/15 "2024-09-09T05:24:05Z")

</div>

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

---

<div class="post-metadata">

### Author: ![piffy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piffy/32/254198_2.png) [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [September 9, 2024, 4:24pm UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/16 "2024-09-09T16:24:55Z")

</div>

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

---

<div class="post-metadata">

### Author: ![toanvoc](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toanvoc/32/423586_2.png) [@toanvoc](https://meta.discourse.org/u/toanvoc)
#### Post date: [September 10, 2024, 12:53am UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/17 "2024-09-10T00:53:44Z")

</div>

I have updated the latest version!

---

<div class="post-metadata">

### Author: ![piffy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piffy/32/254198_2.png) [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [September 10, 2024, 5:42pm UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/18 "2024-09-10T17:42:34Z")

</div>

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

---

<div class="post-metadata">

### Author: ![toanvoc](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toanvoc/32/423586_2.png) [@toanvoc](https://meta.discourse.org/u/toanvoc)
#### Post date: [September 11, 2024, 10:00am UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/19 "2024-09-11T10:00:47Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![piffy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piffy/32/254198_2.png) [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [September 12, 2024, 8:34am UTC](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412/20 "2024-09-12T08:34:42Z")

</div>

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!

[Next page](https://meta.discourse.org/t/buttons-for-scrolling-to-the-top-bottom-of-topics/240412.md?page=2)
