We currently have a jump to top button (anchor points to a div in the header) to make it easy to go back to the top of a category. Ideally it would also work for topics, but the first post of a topic is not necessarily the start of the page. I was wondering if anyone might be interested in helping with a JS that could detect user is on a topic page, and thus reload the full page in this instance so that it jumps to post 1. Or see if anyone else has other suggestions on how we could pull this off cleanly
Clicking on topic title on Desktop sends you to post 1. Is this mobile specific? On mobile it’s behind the progress bar.
4 Likes
Yes. Most of our traffic is mobile. Looking for a more one tap / in your face way for users to perform the action
1 Like
I think a great first step here would be some visual mockups of what you are after, will help scope the work you need a lot.
3 Likes
Thx @sam
So we have this button on our mobile pages already. When I tap on a notification, it brings me to the post where I was mentioned, but I want a quick and easy way to go to the true top of the topic
For a short topic, the simple anchor works, but for longer topics, the button only takes users to the top of the preloaded posts, currently
On iOS you can simply tap the top bar of the browser to jump to the top. Sadly Android has zero equivalent…
That has the same limitation as the anchor solution for long topics
2 Likes
What I’m trying to do is have an easy way to go to the start of the top, post 1. even the tap of the top bar doesn’t do that. the main use case is a user mentions me in a long post, and I want to start reading the whole thread. I don’t want to have to go to the pulldown to do this on my phone. Not to mention, if I want to use the breadcrumbing in this scenario where I’ve been linked to a post, I also have to go to post 1 to see the category navigation.
Anyhow, I think I can do it myself, but would be great if there was some JS variable I could just refer to that already has the URL of the topic post 1, without having to parse the current URL to then create the URL for post 1.
I may be able to use this js link for topics, though I’d prefer if it was a relative link…
window.location.href.substring(0, window.location.href.lastIndexOf(’/’));
I think I give up trying to do it in JS, because it seems like after a while, the browser runs into difficulty reading the current URL 
I thought I was close.
<script type="text/javascript">
function gotoTop(){
if(window.location.href.indexOf("/t/") > -1) {
topurl=window.location.href.substring(0, window.location.href.lastIndexOf('/'));
}
else {topurl="#top";}
window.location.href=topurl;
}
</script>Another use case… have a poll running that I am trying to check in on the results. But everytime I tap in it takes me to the end of the topic.
Given that I frequently have to jump to the first post and back in order to understand the context of the post I jumped to, I think this might be a worthwhile UI improvement. The process bar is good for checking the topic title on mobile, but the second tap to jump to first post might me one too many. And, more importantly, it’s too difficult to find for new users.
So how about putting that button exactly where admins see the wrench (and next to it for admins)?
I’m personally not convinced that two taps on mobile, instead of one, is such a hardship:
- open progress bar
- tap the topic title or the first post date on the expanded progress bar
1 Like
But have you tested how long it takes new users to discover that?
This is ugly and a bit hacky but it works:
After Header:
<div id="jumptotop" onclick="Discourse.__container__.lookup('controller:topic').send('jumpToIndex', 1)">
Jump to Top
</div>
Minimal CSS:
#jumptotop{
padding:5px;
position: fixed;
bottom: 0px;
right: 50px;
background-color: red;
}
Shouldn’t be hard to make that prettier 
Ha. Personally that never even occurred to me. I was always fiddling with the progress slide bar to scroll back to the top. So to @tophee’s point, I would be surprised if new users discovered this.
Thx @david for the back. Will try it out. I may try to merge it with some JS logic so that only applies for topics…
I haven’t tested this yet. Not sure if there’s a better way in javascript to send users to the top. Definitely would appreciate help from someone with JS skills.
if(window.location.href.indexOf(“/t/“) > -1) {
topurl=Discourse.__container__.lookup('controller:topic').send('jumpToIndex', 1)
}
else {topurl=“#top”}
</script>The script I posted doesn’t give you a URL, it immediately scrolls the page to the first post. So I think you’d want something more like:
<script type="text/javascript">
function gotoTop(){
if(window.location.href.indexOf("/t/") > -1) {
Discourse.__container__.lookup('controller:topic').send('jumpToIndex', 1);
}else{
topurl="#top";
window.location.href=topurl;
}
}
</script>
(not tested)
2 Likes
Thaks @david. Updated the portion for sending users to top on non topic pages… I have this live on our site now.
<script type="text/javascript">
function topfunction() {
if(window.location.href.indexOf("/t/") > -1) {
Discourse.__container__.lookup('controller:topic').send('jumpToIndex', 1);
}
else {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
}
</script>
Feel free to see it in action. This post has a poll at the top, so the top button provides an easy way to go back and see the poll results.
https://www.helloforos.com/t/encuesta-sobre-temas-de-politica-por-favor-vota-y-expresate-en-este-tema/296330/360
It works, but, honestly, it’s not very pretty…
If it were docked to the progress bar, I’d like to usd it on my own forum. But I assume the docking would require a plugin…
Certainly up for improvements visually. For now, I just like it for my own personal use. The next change I was to try is to see if I can add a custom google analytics event so I can see if anyone uses it
1 Like