Click top bar to scroll top


(zh99998) #1

like google+, click top bar to scroll top is a good experience i think.

i have done it by a custom header, but maybe it can be a general experience as discourse default.

<script>
window.onload = function(){
$('.d-header').click(function(){ $('body').animate({ scrollTop: 0 });})
}
</script>

(not perfect, this code click logo or avatar can also scroll top, which should not)


(Kane York) #2

You mean, anywhere on the top, instead of just the topic title, which works already?


(Jeff Atwood) #3

Yes, this already exists, just click the actual title of the topic. Is there any reason this is not sufficient?

There are other things one could click in the header, like the right hand menu, the category badge, the favorite star, the forum logo… but the topic title is a sufficiently large target, I would think.


(zh99998) #4

have a look at google plus.
the ux is much better than discourse.


(Jeff Atwood) #5

What specifically do you mean? I rarely see links to G+ stuff, but when I do it often crashes Mobile Safari.


(zh99998) #6

the “click top bar and scroll top”.
smooth and no reloading


(Jeff Atwood) #7

Can you post a link to a long G+ discussion as an example to test with? I just rarely see G+ referenced on the web, and have no G+ account, so I have not been there in a while.


(Sam Saffron) #8

The main UI difference is:

  1. If you click anywhere on the top (even where mouse is not cursor or on an A) it will take you to the top.
  2. When it takes you to the top it “scrolls” with an animation.

We used to scroll with an animation @eviltrout any way that could return?


(zh99998) #9

don’t need a lone discussion.
just index, scroll down, and click top.

@sam and no reload.


(Jeff Atwood) #10

Well, unless it is infinite scrolling (can there be 1000 posts? 10000 posts?), it’s not the same scenario. Unless you can provide a long G+ discussion for me to look at, I’m closing this topic as it boils down to unsubstantiated opinion.

Also, animations just make things slower. Look at iOS 7 and its interminable delays for animations you have to look at over and over every day. Horrible.


(zh99998) #11

sure google plus is infinite scrolling…
just https://plus.google.com/ and scroll down and down… then click top blank bar.

if you really need a long discussion…

or any other page is ok.
e.g. my page
https://plus.google.com/u/0/+神楽坂玲奈/posts

scroll down and click top bar.

not only in discussion, in anywhere.


(Sam Saffron) #12

I understand this request:

You can click on white area and have it scroll up, this deviates from the way the web works, some would argue it adds usability.

The animation back to top is totally doable if all the posts are loaded which will be the majority of cases, it would also be nice when you are navigating through a topic (like clicking on the arrow on a quote) afaik it used to work.

Clearly in outlier cases we need to be smarter, eg if you are at post 1000 and 900 up are not loaded, we could “animate scroll” to say 920 and then show loading and load the topic. The animation gives you a sense of place, even if you just animate a bit it makes it clearer you have not moved to a new page.


(Jeff Atwood) #13

Thanks for the links. Would still like to see an actual very long discussion, which is what we do here, rather than a Facebook style news feed but these will do.

On the 2nd link clicking the topbar does not scroll to top? I can’t get it to anyway.

If you use the 1st link, and scroll to bottom, it works OK for a small, fixed number of comments – but again, that is not really what we do here.


(zh99998) #14

in discourse, when i’m in page other than discussion.


for example here.
and scroll down and down.

then i can’t scroll to top to checking for new topics or switch to another page conveniently.

topic title is only available in discussion, but the requirement of scroll to top and top bar are anywhere…


(zh99998) #15

the longest discussion can get …


201 comments…

yes it still small. and seems google have no proformance optimization for lone discussion.(i’ve used g+ 2 years and never see this optimization)

but it’s doesn’t metter.
we can do them too…

if i’m in here


and have not loaded the top post.
and click top bar.
it will load it. behave same as now (except we can hit the top bar, not only the title)

but if i have already loaded the top post.
or in here
301 Moved Permanently (scroll down)
or here
301 Moved Permanently (scroll down)
or here
Click top bar to scroll top (short discussion)

and click top bar.
there will be an animation and no reload…


(Robin Ward) #16

I had no end of problems with animations. On desktop Chrome they work fine, but many mobile browsers and such get awful performance and weird behaviour. I ended up stripping most of them while we got the site working across the board. I wouldn’t be against adding some in, but maybe we should pluginize them or something just in case.


(Anthony) #17

I think removing animations is a big mistake. Good animations explain what software is doing in addition to making it feel faster. Clicking the title for the first time in discourse completely confused me. I had no idea that it was taking me to the top. I thought I did something I was not suppose to do. It also seemed slower than Google plus even if it didn’t take any longer because of the reload and lack of any progress indication,

Getting the transition time right is a different issue to having transitions at all.


(Jeff Atwood) #18

Maybe we could do animations for new users only. Do you have an iPhone with iOS 7? I get very, very sick of the animations after about the 5th time seeing them. After that it is just a user hostile arbitrary delay I have to wait through, every time.


(Sam Saffron) #19

I dunno, this is one animation that I really like cause it gives me a sense-of-place. When I click on post #13 and am on post #18 I prefer if the browser scrolls me up as opposed to reloads the topic on post #13, its just a lot less jarring and provides context.


(Anthony) #20

Yes I am using iOS 7,it just a matter of those animation being too slow. If it was the proper speed and conveying information, it makes the action feel immediate and natural:

http://ignorethecode.net/blog/2013/04/08/immediate_feedback/

The go back a view animation and the portrait to landscape animations still feel fast and give you a sense of what is happening.