This might be useful if the See x new or updated topic would be sticky to top below header so you see immediately while scrolling the topic list. When you click the bar it will jump to top to load the new or updated topics.
The other part (js) which is going to be a click function to jump to the top or scroll to top but I don’t know how to do or what is the best way to do this.
I found this section in template discovery/topics.hbs and discovery/categories.hbs. If modify the <a href to <a href="/" might work (not sure, i didn’t try) but with this every time loading just like clicking the logo.
So, are we done? No. this breaks Discourse because you’re fully overriding the action. Clicking the link will now scroll to the list-controls element, but it won’t load the new topics. Why? Because the code in core is no longer being applied. I mean, this stuff
So, how do you fix that? With this simple line
You don’t have to copy any code from core if you just want to add to it. Do your work, then add that line. All it does is that it makes sure that the code from core applies.
// mobile has a different layout
// safari is sometimes fussy without the prefix
// banner should be on top of content
scroll-margin-top: calc(var(--header-offset) * 2);
Thank you @Johani! It is very helpful to me and I think I finally understood a lot of thing. I really like your detailed answers because we can learn a lot from them, how things works and of course it works perfectly. Thank you again!