back to top link

[Zavy86]

There are only 2 (fairly minor) features that I feel are missing:

• [x] A right side bar with content of headings on the page that is being viewed (created from H2 and H3 headings on the page) to make navigation within the page easier
• [ ] A back to top button to prevent sometimes long scrolling up

Originally posted by @stormpaul in https://github.com/Zavy86/WikiDocs/issues/75#issuecomment-1864726381

[bverkron]

A right side bar with content of headings on the page that is being viewed (created from H2 and H3 headings on the page) to make navigation within the page easier

Would love a table of contents!

[bverkron]

Edit: I see that you can manually add a table of contents with the [toc] syntax but having an automatically generated ToC on each page would be much easier and avoid using custom syntax that may not be supported in other wiki platforms / renderers.

Also IMO it should created the ToC based on all headings tags not just h2 and h3.

[ffiesta]

Hi,

I have 2 ways to go to TOP

1. markdown Mode

\> [Homepage](/biblio.code)  

[Go UP](#homepage)

2. html code Mode

<a href="#" style="position: fixed;bottom: 15px;right: 30px;z-index: 99;font-size: 12px;border: none;outline: none;background-color: red;color: white;cursor: pointer;padding: 15px;border-radius: 4px;" target="_top">TOP</a>   

• Go UP

[Zavy86]

we can add a green (main color) button in the bottom of the page..

[ffiesta]

Due to my basic PHP knowledge, it is preferable to be "someone" with more knowledge to add the back to top link to the wikidocs code.

Teste on wikidocs 1.0.37 and 1.0.42.

The line numbers refer to the approximate location.

1. Add code to file template.inc.php after </main> line341 :

<button onclick="topFunction()" id="myBtn" title="Go to top" style="display: none; position: fixed;bottom: 15px;right: 30px;z-index: 99;font-size: 12px;border: none;outline: none;background-color: #4caf50;color: white;cursor: pointer;padding: 15px;border-radius: 4px;">Top</button>

2. Add code to file template.inc.php after <?php endif; ?> line379:

<script>
// Get the button Top
let mybutton = document.getElementById("myBtn");

// When the user scrolls down 30px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
 if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
   mybutton.style.display = "block";
 } else {
   mybutton.style.display = "none";
 }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
 document.body.scrollTop = 0;
 document.documentElement.scrollTop = 0;
}
</script>

[ffiesta]

Image without Top Button

Image with Top Button

:memo: The code only add the green TOP button on right lower corner of webpage.

[leomoon]

Edit: I see that you can manually add a table of contents with the [toc] syntax but having an automatically generated ToC on each page would be much easier and avoid using custom syntax that may not be supported in other wiki platforms / renderers.

Also IMO it should created the ToC based on all headings tags not just h2 and h3.

About the TOC, not everyone like TOC on every doc.

One example would be a short page doesn't need TOC...

We want to follow standard wiki workflows.

[ffiesta]

Edit: I see that you can manually add a table of contents with the [toc] syntax but having an automatically generated ToC on each page would be much easier and avoid using custom syntax that may not be supported in other wiki platforms / renderers. Also IMO it should created the ToC based on all headings tags not just h2 and h3.

About the TOC, not everyone like TOC on every doc.

One example would be a short page doesn't need TOC...

We want to follow standard wiki workflows.

Hi @leomoon , I don't understand what you mean by TOC, but if you are referencing the text with dot point,

• the 3 dot's and names are my folders, not go to top button

The code only add the lower right corner green top button

Images is to show with-out and with top button!!!

Code is based on: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

[leomoon]

TOC = table of contents.

[ffiesta]

Please check if my location of UP button is good, otherwise send me better location to I try.

[Zavy86]

Hi @ffiesta, open a pull request so we can test it together, if necessary we can make the changes directly there!

Due to my basic PHP knowledge, it is preferable to be "someone" with more knowledge to add the back to top link to the wikidocs code.

[leomoon]

This is added thanks to @ffiesta in version 1.0.60