Topic on Project:Support desk/Flow

Summary by Arnavutsezgin

Also; https://www.w3schools.com/howto/howto_js_scroll_to_top.asp you can use codes. Over there CSS code add MediaWiki:Common.css and JS code add MediaWiki:Common.js. Then, Exmaple button code your own skins add <skins>.skin.php .

Example: https://www.sorumu.com/MediaWiki:Common.css , https://www.sorumu.com/MediaWiki:Common.js and look right click source code.

WhiteTigerItaly (talkcontribs)

Hi, I need a button/link to skip to the top of the page when this is very long. I cannot use the Anchor because In the first row of the page there is not a Section.

Thanks in advance for the advices

WT

Leucosticte (talkcontribs)
WhiteTigerItaly (talkcontribs)

Many thanks.
I looked for this information, but I have not seen this help page.

12.106.197.114 (talkcontribs)
<span id="BackToTop"></span>
<div class="noprint" style="background-color:#FAFAFA; position:fixed; bottom:2%; left:0.25%; padding:0; margin:0;">
[[#BackToTop|Back to the Top]]
</div>

This will put a floating "Back to the Top" link at the bottom left of the page.

Fabartus (talkcontribs)

I did a little code swiping from this technique and have some artifacts that I could use an expert fix or opinion on what is causing them. My version morphed that into a button based part on code I adapted to prod new users in tutorials. Merged that with the above, and for some reason am seeing a long tale 1-2px bar just before and just after the virtual 'mouse button' wrapping the above code (more or less). The template is on a lot of pages, so be careful! See b:Template:TRS-hdrbox, and if you want a sandbox, b:template:TRS-X serves that function for us. I'd appreciate it. I'm no good at peeking at the output code for the generated page, and have no time to tackle learning CSS and scripting. Best regards,

This post was posted by Fabartus, but signed as FrankB.

Fabartus (talkcontribs)

Had my son look at this is firebug and he resolved the matter for me. I'd had an initial border statement in the wrapper showing through---just like as if I'd told the computer to do that. Go figure! LOL.

For others liking this technique, the original code above did not find the page top. A minor misrecollection, I'm sure. The necessary syntax is:

[[#top|...]] - for the default anchor on the page

My solution was a button, with some reordering of the elements:

<div id="BackToTop"  class="noprint" style="background-color:#DDEFDD; position:fixed;
 bottom:32px; left:2%; z-index:9999; padding:0; margin:0;"><span style="color:blue;
 font-size:8pt; font-face:verdana,sans-serif;  border:0.2em outset #ceebf7;
 padding:0.1em; font-weight:bolder; -moz-border-radius:8px; ">
[[#top| Back to the Top ]]</span></div>

The position is somewhat arbitrary, but we'd raised it above the bottom page so when it floats over links the can be seen to float through and beneath; this also doesn't cover the mediawiki logo at the bottom page on the Wikibooks. If you want to see it in action, see any Trainz Wikibook page that's got the header nav template. Enjoy!

This post was posted by Fabartus, but signed as FrankB.

Chrisdevelop (talkcontribs)

Thanks, that works!