News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

"Go to top" link is brittle (will break with fixed top menu).

Started by Antechinus, May 17, 2022, 02:22:46 PM

Previous topic - Next topic
Print
Go Down Pages1
User actions

Antechinus

May 17, 2022, 02:22:46 PM Last Edit: June 14, 2023, 01:18:50 PM by Diego Andrés
Not sure if you want to call this a bug, or call it a candidate for Tips and Tricks.

I'm inclined to think there are good arguments for calling it a (small ) bug.
Code (index.template.php) Select
<a href="#top_section">', $txt['go_up'], ' &#9650;</a></li>
Ok, yes, it works with default presentation. However, as soon as someone decides they want position: fixed; on their top bar it will break, because fixed positioning does that. It's fixed, so it can't force a scroll to top. :)

So, what are the alternatives? #header isn't optimal (can be made to work, but is more faffing around). However, if you add an ID to the html tag, that will always work.
Code Select
<html id="html_test_id"', $context['right_to_left'] ? ' dir="rtl"' : '', !empty($txt['lang_locale']) ? ' lang="' . str_replace("_", "-", substr($txt['lang_locale'], 0, strcspn($txt['lang_locale'], "."))) . '"' : '', '>
Code Select
<a href="#html_test_id">', $txt['go_up'], ' &#9650;</a></li>

Arantor

#1
May 17, 2022, 02:25:32 PM
If it works with the default presentation it is by definition not a bug. You can't go 'it doesn't work after I changed it'... :P
Holder of controversial views, all of which my own.

Antechinus

#2
May 17, 2022, 02:28:01 PM
Well yes, true, but OTOH we are supposed to be building in flexibility, and this is pretty basic. ;)

But as I said, I don't care if it goes in Tips.

Sir Osis of Liver

#3
May 17, 2022, 07:46:57 PM
Or can add an empty div at top -

Code Select

    echo '
<div id=#target></div>
<div id="wrapper">



When in Emor, do as the Snamors.
                              - D. Lister

Antechinus

#4
May 17, 2022, 07:55:54 PM
Yell yes, you could do that, but why on Earth would you when you can easily put an ID on an existing tag which will do the job?

Anyway, it couldn't go where you put it. It has to go before #header to work with a fixed top bar, and it has to go before #top_section to work by default. The body tag ID is already taken by the browser, so...

Sir Osis of Liver

#5
May 17, 2022, 08:02:14 PM
Tried it with theme I've been working on, Go Up didn't work because it targeted top_section and theme doesn't have a top_section.  Tried a couple things, ended up targeting wrapper.
When in Emor, do as the Snamors.
                              - D. Lister

Antechinus

#6
May 17, 2022, 08:14:55 PM
Every theme ever coded, and every theme that ever will be coded, will have an html tag. It will work. ;)
Print
Go Up Pages1
User actions
Advertisement: