add scroll-up button and anchor links with js and css

input/blog/2022/2022_07_29_MCH2022.md

@@ -133,8 +133,8 @@ lightgallery([
 ])
 %-->
 
+<a class="anchor al2" name="app" href="#app"></a>
 ## Badge App Development
-<a class="anchor" name="app"></a>
 
 As is custromary for these events, every ticket-holder received an [MCH2022 Badge](https://badge.team/docs/badges/mch2022/) at the entrance.
 It contains a bunch of real nice gimmicks, like an FPGA and an RP2040 as well as an ESP32.

input/blog/2023/2023_07_29_dampfmaschine.md

@@ -58,8 +58,8 @@ And here is one last look into the steam engine shed, affectionately called "Dam
 
 Another trip to the house will have to follow soon, to get all the smaller parts, tools, documents, etc.
 
+<a class="anchor al2" name="more_pictures" href="#more_pictures"></a>
 ## More Pictures
-<a class="anchor" name="more_pictures"></a>
 
 <div class="collapse">Some more photographs I didn't use above.</div>
 <div class="collapsecontent">

input/blog/2023/2023_09_07_cccamp23.md

@@ -822,8 +822,8 @@ lightgallery([
 ])
 %-->
 
+<a class="anchor al2" name="more_pictures" href="#more_pictures"></a>
 ## More Pictures
-<a class="anchor" name="more_pictures"></a>
 
 <div class="collapse">Some more photographs I didn't use above.</div>
 <div class="collapsecontent">

input/blog/2024/2024_03_09_toolbox_anniversary.md

@@ -37,8 +37,8 @@ lightgallery([
 We had a surprisingly large number of visitors.
 Hopefully this will help get things going again after the Covid dull.
 
+<a class="anchor al2" name="more_pictures" href="#more_pictures"></a>
 ## More Pictures
-<a class="anchor" name="more_pictures"></a>
 
 <div class="collapse">Some more photographs I didn't use above.</div>
 <div class="collapsecontent">

input/projects/3d-printing/octoprint.md

@@ -134,8 +134,8 @@ systemctl list-units 'octoprint_connect*'
 journalctl -u octoprint_connect@ttyUSB0.service
 </pre>
 
+<a class="anchor al2" name="power_button" href="#power_button"></a>
 ## Physical Power Button
-<a class="anchor" name="power_button"></a>
 
 Besides controlling eg. an ATX power supply or a relay connecting the printer to the power supply, I also wanted a push-button connected to the Raspberry Pi that can toggle the power supply using the aforementioned connection on the Pi.
 This can be solved using a simple Python script.

input/projects/3d-printing/sparkmaker_repair.md

@@ -32,8 +32,8 @@ lightgallery([
 * [Shelf Space (February 2023)](sparkmaker_repair.html#shelf_space)
 * [More Pictures](sparkmaker_repair.html#more_pictures)
 
+<a class="anchor al2" name="endstop" href="#endstop"></a>
 ## Endstop Fix
-<a class="anchor" name="endstop"></a>
 
 The printer only has a single axis, Z, with an optical endstop switch at the bottom.
 This switch is triggered by a large plastic shim screwed to the Z carriage.
@@ -48,8 +48,8 @@ lightgallery([
 ])
 %-->
 
+<a class="anchor al2" name="encoder" href="#encoder"></a>
 ## Encoder Replacement
-<a class="anchor" name="encoder"></a>
 
 After only a couple of hours of use, the encoder at the front of the machine stopped working properly.
 You can see this in the video below.
@@ -98,8 +98,8 @@ lightgallery([
 
 With the hardware back in working order I could now focus on the PC software side of things.
 
+<a class="anchor al2" name="experiments" href="#experiments"></a>
 ## First Slicing Experiments
-<a class="anchor" name="experiments"></a>
 
 After getting the hardware back running the next step is generating some sliced files.
 Unfortunately the official Sparkmaker website no longer exists and the downloads from there are hard to find.
@@ -130,8 +130,8 @@ lightgallery([
 Even though one corner was warping strongly, the results of the first print attempt were promising.
 It is an SA-profile keycap, sliced with ChituBox with 0.1mm layer height.
 
+<a class="anchor al2" name="script" href="#script"></a>
 ## SL1 to WOW File Format Converter Script
-<a class="anchor" name="script"></a>
 
 But there is one open-source alternative, [PrusaSlicer](https://github.com/prusa3d/PrusaSlicer), and it has support for SLA slicing for the [Prusa SL1 printer](https://www.prusa3d.com/product/original-prusa-sl1s-speed-3d-printer/).
 But it only produces `.sl1` files, their custom file format.
@@ -198,8 +198,8 @@ So G-Code always needs to take care to turn the LEDs off at the end of a print.
 For some reason we once managed to have the LEDs turned on with an error message showing.
 This requires draining the resin and scraping off any remaining bits.
 
+<a class="anchor al2" name="prusaslicer" href="#prusaslicer"></a>
 ## Configuring PrusaSlicer for the Sparkmaker
-<a class="anchor" name="prusaslicer"></a>
 
 To configure PrusaSlicer I recommend starting out with their built-in profile for the SL1.
 Selecting it as the machine automatically switches the program over into "SLA mode", where the support and pad generation work differently compared to the normal FDM mode.
@@ -263,8 +263,8 @@ lightgallery([
 ])
 %-->
 
+<a class="anchor al2" name="shelf_space" href="#shelf_space"></a>
 ## Shelf Space (February 2023)
-<a class="anchor" name="shelf_space"></a>
 
 I still had some drawer rails and a wooden plate left over from replacing my [Fabrikator Mini](fabrikator-mini.html) with my new [Laser Engraver](laser-engraver.html) in my [Ikea Lack tower](ikea-lack.html).
 So I decided to re-use these to properly store the Sparkmaker.
@@ -319,8 +319,8 @@ The only thing still missing is a good solution for curing / hardening.
 I'm thinking of some kind of small turntable and UV lamp or LED strip.
 That's still to come, so stay tuned! 🧐
 
+<a class="anchor al2" name="more_pictures" href="#more_pictures"></a>
 ## More Pictures
-<a class="anchor" name="more_pictures"></a>
 
 <div class="collapse">Some more photographs I didn't use above.</div>
 <div class="collapsecontent">

input/projects/auto_brightness.md

@@ -193,8 +193,8 @@ lightgallery([
 ])
 %-->
 
+<a class="anchor al2" name="license" href="#license"></a>
 ## License
-<a class="anchor" name="license"></a>
 
 The [AutoBrightness project](https://git.xythobuz.de/thomas/AutoBrightness) is licensed under the [GNU General Public License](https://www.gnu.org/licenses/gpl-3.0.en.html).
 

input/projects/input_devices/trackball_v1.md

@@ -48,8 +48,8 @@ You can find everything you need to build it yourself in [the git repository](ht
  * [License](trackball_v1.html#license)
  * [More Pictures](trackball_v1.html#more_pictures)
 
+<a class="anchor al2" name="part_selection" href="#part_selection"></a>
 ## Part Selection
-<a class="anchor" name="part_selection"></a>
 
 Before embarking on this project some decisions and orders had to be made.
 
@@ -128,8 +128,8 @@ Therefore, if you only want to build a single trackball, it will be more expensi
 What you see on top is the actual price I paid for the parts, reduced to the amount required for a single device.
 Also some parts, like screws or 3D printing materials, I consider as normal parts of a workshop, so they are not added to the cost either.
 
+<a class="anchor al2" name="3d_design" href="#3d_design"></a>
 ## 3D Design
-<a class="anchor" name="3d_design"></a>
 
 The most important part of the 3D design is the mounting of the sensor and lens assembly in relation to the tracking surface, in our case the ball.
 The datasheet has lots of dimensional drawings which kind of hide all the important measurements somewhere in there.
@@ -179,8 +179,8 @@ Rendering takes ¾ of an hour on my machine.
 For development the `$fn` parameter can be set to a lower value.
 That helps somewhat.
 
+<a class="anchor al2" name="firmware_devel" href="#firmware_devel"></a>
 ## Firmware Development
-<a class="anchor" name="firmware_devel"></a>
 
 Before designing and printing the complete device I made a small test bed to hold the sensor and ball.
 
@@ -244,8 +244,8 @@ I simply reserved a bunch of memory in RAM that acts as the disk device.
 Before it is mounted by the user, the disk is formatted and filled with the required data.
 Then the host can mount it and read the files.
 
+<a class="anchor al2" name="wiring" href="#wiring"></a>
 ## Wiring
-<a class="anchor" name="wiring"></a>
 
 Wiring up the device is very easy, especially because the RP2040 provides great flexibility in its use of the GPIOs and the hardware periphery, in our case SPI.
 
@@ -276,8 +276,8 @@ GPIO 27 (pin 32)      -> Switch (right button)
 The switches use the internal pull-up resistors in the RP2040 GPIOs.
 So they should be wired active-low, with their common connection to GND.
 
+<a class="anchor al2" name="sensor_problems" href="#sensor_problems"></a>
 ## Sensor Problems
-<a class="anchor" name="sensor_problems"></a>
 
 With the firmware mostly done I hoped to be able to use the device immediately.
 But it didn't quite work.
@@ -331,8 +331,8 @@ Now all billard balls work fine, regardless of their colour.
 Even the white ball works without any problems.
 With the electronics and the firmware ready, we could now move on to refining the mechanics.
 
+<a class="anchor al2" name="first_prototype" href="#first_prototype"></a>
 ## First Prototype
-<a class="anchor" name="first_prototype"></a>
 
 The first top case was printed on Philipps [Anycubic Photon Mono 4K](https://www.anycubic.com/products/photon-mono-4k) SLA printer with [Anycubic Standard Resin + Grey](https://amzn.to/3RSLslf).
 This turned out to not be the best choice.
@@ -379,8 +379,8 @@ lightgallery([
 ])
 %-->
 
+<a class="anchor al2" name="improvements" href="#improvements"></a>
 ## Improvements
-<a class="anchor" name="improvements"></a>
 
 For the second iteration we didn't do that many changes in the 3D design.
 The button orientation has been overhauled.
@@ -434,8 +434,8 @@ lightgallery([
 ])
 %-->
 
+<a class="anchor al2" name="user_experience" href="#user_experience"></a>
 ## User Experience
-<a class="anchor" name="user_experience"></a>
 
 I have been using these Trackballs for about six weeks at the time of this writing.
 From a software and electronics perspective they work absolutely fine.
@@ -449,8 +449,8 @@ The second version, with some more thought put into the placement and orientatio
 But using a device each day that I've built completely myself, from the grounds up in pretty much all aspects, brings me a lot of joy.
 I highly recommend it.
 
+<a class="anchor al2" name="license" href="#license"></a>
 ## License
-<a class="anchor" name="license"></a>
 
 The Trackball is licensed under the [GNU General Public License](https://www.gnu.org/licenses/gpl-3.0.en.html).
 
@@ -466,8 +466,8 @@ The Trackball is licensed under the [GNU General Public License](https://www.gnu
 
     See <http://www.gnu.org/licenses/>.
 
+<a class="anchor al2" name="more_pictures" href="#more_pictures"></a>
 ## More Pictures
-<a class="anchor" name="more_pictures"></a>
 
 <div class="collapse">Some more photographs I didn't use above.</div>
 <div class="collapsecontent">

input/projects/lars.md

@@ -73,8 +73,8 @@ The software is not quite finished yet, but without access to the hardware I'm n
 
 [For now](lars_v2.html)...
 
+<a class="anchor al2" name="more_pictures" href="#more_pictures"></a>
 ## More Pictures
-<a class="anchor" name="more_pictures"></a>
 
 <div class="collapse">Some more photographs I didn't use above.</div>
 <div class="collapsecontent">

input/projects/laser-engraver.md

@@ -40,8 +40,8 @@ lightgallery([
 * [Cutting Parameters](laser-engraver.html#cutting_parameters)
 * [More Pictures](laser-engraver.html#more_pictures)
 
+<a class="anchor al2" name="hardware" href="#hardware"></a>
 ## Hardware
-<a class="anchor" name="hardware"></a>
 
 I know I say this in a lot of articles here, probably in an attempt to justify my hoarding of electronic parts. 😳
 But this was even better than most of my previous projects, in the sense that I didn't have to buy any parts at all, except for the 2500mW 450nm laser diode, which I got used from my colleague [Philipp](https://www.phschoen.de/) for just 13€.
@@ -49,8 +49,8 @@ The rails I bought many years ago and never used.
 The steppers, mainboard, display, fans and cables came from my now disassembled [CTC i3](ctc-i3.html).
 Everything else came out of my parts bin.
 
+<a class="anchor al3" name="mechanics" href="#mechanics"></a>
 ### Mechanics
-<a class="anchor" name="mechanics"></a>
 
 The mechanism is based on the ["Cantilever Laser Engraver" by Meatball](https://www.printables.com/model/213526-cantilever-laser-engraver).
 This in turn is based on the ["Cantilever Laser Engraver" by GeoDave](https://www.thingiverse.com/thing:4605853).
@@ -91,8 +91,8 @@ lightgallery([
 ])
 %-->
 
+<a class="anchor al3" name="electronics" href="#electronics"></a>
 ### Electronics
-<a class="anchor" name="electronics"></a>
 
 As mentioned above I used the electronics, namely mainboard, LCD and fans, from my old 3D printer.
 
@@ -141,14 +141,14 @@ lightgallery([
 ])
 %-->
 
+<a class="anchor al2" name="software" href="#software"></a>
 ## Software
-<a class="anchor" name="software"></a>
 
 There's a surprisingly large amount of software involved in this project.
 All just to move a lamp around a bit 💡🤔
 
+<a class="anchor al3" name="mcu_firmware" href="#mcu_firmware"></a>
 ### MCU Firmware
-<a class="anchor" name="mcu_firmware"></a>
 
 Most DIY laser engravers or CNC machines seem to use the [GRBL firmware](https://github.com/gnea/grbl).
 Unfortunately this firmware only runs on Atmega328p MCUs, so I can not use it with the Atmega2560 on the GT2560 mainboard.
@@ -173,8 +173,8 @@ Using this I can generate G-Code where the object to cut starts at coordinates `
 
 My current Marlin configuration for the laser engraver can be found [on my Gitea instance](https://git.xythobuz.de/thomas/marlin/src/branch/laser-engraver).
 
+<a class="anchor al3" name="host_software" href="#host_software"></a>
 ### Host Software
-<a class="anchor" name="host_software"></a>
 
 Besides the microcontroller firmware, we also need some host software to prepare the G-Code from whatever kind of input file we start out with.
 There are two basic approaches for generating paths for the laser engraver.
@@ -192,8 +192,8 @@ But it is commercial paid software, not under any free software license, so [it
 
 Below I will try to document all different free software packages I tried for laser engraving.
 
+<a class="anchor al4" name="lasergrbl" href="#lasergrbl"></a>
 #### LaserGRBL
-<a class="anchor" name="lasergrbl"></a>
 
 The first solution I found out about is [LaserGRBL](https://lasergrbl.com/).
 It is a Windows-only program, but at least it is open-source / free software.
@@ -312,8 +312,8 @@ This is not possible when using LaserGRBL to import SVG vector paths.
 With them, the output will always start at coordinates `(0, 0)`.
 You will then have to set the proper offset on the machine itself, as described in the Marlin section above.
 
+<a class="anchor al4" name="inkscape" href="#inkscape"></a>
 #### Inkscape
-<a class="anchor" name="inkscape"></a>
 
 Inkscape includes the [G-Code Tools Plugin from the russian-language CNC-Club forums](https://www.cnc-club.ru/forum/viewtopic.php?t=35).
 Unfortunately I was not able to find much up-to-date english-language documentation for this.
@@ -323,8 +323,8 @@ I was able to get it to generate G-Code from a path, but not with any laser powe
 This section will be updated if I have more success in the future.
 Until then I'm just using Inkscape to export svg files for LaserGRBL.
 
+<a class="anchor al4" name="freecad" href="#freecad"></a>
 #### FreeCAD
-<a class="anchor" name="freecad"></a>
 
 FreeCAD has the [Path Workbench](https://wiki.freecadweb.org/Path_Workbench), which can be used to create G-Code instructions for all kinds of CNC machines.
 It is not really complete and fool-proof yet, unfortunately.
@@ -332,8 +332,8 @@ And it is also not designed for pure 2D machines, like laser engravers, by defau
 
 I have not yet tested that.
 
+<a class="anchor al4" name="g_code" href="#g_code"></a>
 #### Working with G-Code
-<a class="anchor" name="g_code"></a>
 
 One nice feature I saw in LaserGRBL, but was not able to use with Marlin, is the ability to draw the outline of the object to be cut, for positioning of the stock material.
 So I quickly made up a small Python script that analyzes a G-Code file, taking the coordinates from all G1 cutting moves and generating their bounding box, which is then drawn on the lowest possible power setting multiple times.
@@ -428,8 +428,8 @@ I also still had the text not aligned properly.
 The 3x1 and 3x3 runs on the left side were made after properly focussing the laser and fixing the text alignment.
 Here 200mm/min with 10 iterations was already enough to cut through the 3mm plywood.
 
+<a class="anchor al2" name="cutting_tests" href="#cutting_tests"></a>
 ## Cutting Tests
-<a class="anchor" name="cutting_tests"></a>
 
 For the first 'real' test I decided to cut the assembly jig for the [Pagoda antenna](https://www.maartenbaert.be/quadcopters/antennas/pagoda-antenna/#design-files) by Maarten Baert.
 The files are available in dxf and svg format.
@@ -474,8 +474,8 @@ lightgallery([
 The end-result does not seem to be really affected by this however, although with 200mm/min and 15 iterations the parts were not removable as easily as I hoped.
 So I think I either have to adjust the focus better or go up to 20 iterations for the 3mm birch plywood.
 
+<a class="anchor al2" name="future_improvements" href="#future_improvements"></a>
 ## Future Improvements
-<a class="anchor" name="future_improvements"></a>
 
 I didn't expect it to be this bad, but cutting wood really produces a noticeable amount of smoke and the smell of burnt wood.
 So in the long run I will have to add some kind of air filtration system to my Ikea Lack tower.
@@ -488,8 +488,8 @@ I also came across the [LaserWeb project](https://laserweb.yurl.ch/) which seems
 This would be a very useful addition and solve a lot of the software workflow problems illustrated above.
 Also theres more than enough room left on my base plate for a SBC.
 
+<a class="anchor al2" name="cutting_parameters" href="#cutting_parameters"></a>
 ## Cutting Parameters
-<a class="anchor" name="cutting_parameters"></a>
 
 Here are the results of all cutting tests I've made up to now.
 I will update this table as soon as I gather new data 🧑‍🔬
@@ -508,8 +508,8 @@ tableHelper([ "align-right", "align-right", "align-right", "align-right", "align
 )
 %-->
 
+<a class="anchor al2" name="more_pictures" href="#more_pictures"></a>
 ## More Pictures
-<a class="anchor" name="more_pictures"></a>
 
 <div class="collapse">Some more photographs I didn't use above.</div>
 <div class="collapsecontent">

input/projects/ledmatrix_v2.md

@@ -196,8 +196,8 @@ lightgallery([
 I haven't yet given up that plan completely, but I have to think of a solution for diffusing the light first.
 The LEDs are too small and spaced too far apart to look good in this configuration.
 
+<a class="anchor al2" name="more_pictures" href="#more_pictures"></a>
 ## More Pictures
-<a class="anchor" name="more_pictures"></a>
 
 <div class="collapse">Some more photographs I didn't use above.</div>
 <div class="collapsecontent">

input/projects/nas_2018.md

@@ -158,8 +158,8 @@ In the end I have to admit I've given up.
 To be honest, I don't really need the faster speeds.
 But if anyone has suggestions, I'm open to try it again!
 
+<a class="anchor al2" name="06_2022" href="#06_2022"></a>
 ## Four-Year Update (June 2022)
-<a class="anchor" name="06_2022"></a>
 
 Recently I was greeted by this log message in the TrueNAS web UI.
 
@@ -178,8 +178,8 @@ lightgallery([
 Unfortunately hard disk prices are still high and I'm currently not able to afford two new drives.
 So for now I'm making sure I have a [working backup](2022_06_06_hetzner_storage_box.html) and hope for the best 😅
 
+<a class="anchor al2" name="ups_dead" href="#ups_dead"></a>
 ## UPS Battery Dead (May 2023)
-<a class="anchor" name="ups_dead"></a>
 
 To operate the server more safely I bought an [APC Back-UPS 700](https://www.apc.com/de/de/product/BX700U-GR/apc-backups-700-va-230-v-avr-schukoausg%C3%A4nge-batterie-12v-7-0ah-wird-ersetzt-durch-bx750migr/) back when I built it.
 Sometime in 2022 I started getting alerts from the APC daemon that the battery needs to be replaced.

input/projects/openchrono.md

@@ -55,8 +55,8 @@ You can find everything you need to build it yourself in [the git repository](ht
  * [License](openchrono.html#license)
  * [More Pictures](openchrono.html#more_pictures)
 
+<a class="anchor al2" name="prototype" href="#prototype"></a>
 ## Prototype
-<a class="anchor" name="prototype"></a>
 
 Because the optical sensing is dependent on environment conditions I decided to not do any breadboard prototyping and immediately went ahead and designed a case to test with.
 In this initial attempt I used an Arduino Nano, an SSD1306 128x64 OLED LCD and an AA-battery holder, all of which I still had left from other projects.
@@ -99,8 +99,8 @@ I think it makes sense to drive the LEDs at their current limit, so ~20mA.
 Also the pull-up resistors for the transistors need their value to be low enough to quickly drive the signal to near supply voltage when the BB interrupts the light beam.
 A value of 1kΩ seems to work well there.
 
+<a class="anchor al2" name="mounting_options" href="#mounting_options"></a>
 ## Mounting Options
-<a class="anchor" name="mounting_options"></a>
 
 Unfortunately the OpenChrono IR photo-sensing is a bit constrained in regards to the path of the BB.
 The sensors are only 3mm wide, and the BBs are 6mm wide commonly.
@@ -141,8 +141,8 @@ lightgallery([
 ])
 %-->
 
+<a class="anchor al2" name="test_results" href="#test_results"></a>
 ## Test Results
-<a class="anchor" name="test_results"></a>
 
 Attaching the whole unit to a airsoft gun barrel turned out to be a bit tricky.
 
@@ -227,8 +227,8 @@ The power output of the two LEDs is simply not enough (`2 × 3V × 20mA = 120mW`
 
 So for now I do **not** recommend to build OpenChrono with the tracer option as it currently can be found in the repository.
 
+<a class="anchor al2" name="build_guide" href="#build_guide"></a>
 ## Build Guide
-<a class="anchor" name="build_guide"></a>
 
 Also take a look at [the "Hardware" section of the README.md](https://git.xythobuz.de/thomas/OpenChrono/src/branch/master/README.md#hardware).
 You can find detailed parts lists, schematic and wiring plan there as well.
@@ -429,8 +429,8 @@ If for some reason the hole through the device is not perfectly aligned with you
 In that case, you will not hit what you are aiming at!
 So beware of your environment, wear proper safety gear and start out with a short distance to your bullet stop, increasing only slowly as you are sure everything works as expected.
 
+<a class="anchor al2" name="firmware" href="#firmware"></a>
 ## Firmware
-<a class="anchor" name="firmware"></a>
 
 To achieve high measurement accuracy I used some of the hardware features of the AtMega328p MCU included in standard Arduinos.
 
@@ -614,8 +614,8 @@ This is very easy to implement using the great [u8g2 library](https://github.com
 If you're interested I recommend taking a look at [the code](https://git.xythobuz.de/thomas/OpenChrono/src/branch/master/firmware/OpenChrono).
 I think it should be relatively easy to understand and well commented 😅
 
+<a class="anchor al2" name="possible_future_improvements" href="#possible_future_improvements"></a>
 ## Possible Future Improvements
-<a class="anchor" name="possible_future_improvements"></a>
 
 As usual I was mostly using parts that I already had.
 That explains some strange design decisions, like using cylindrical screws for the battery compartment lid, which honestly look and feel ugly and stand out from the device.
@@ -629,8 +629,8 @@ I also don't think it's realistic to take this bulky device onto a field, but wh
 To be quite honest, I'm happy with the device as it is now.
 But I'm always open to feedback and pull requests of course, especially ones improving the tracer option 😉
 
+<a class="anchor al2" name="potential_other_uses" href="#potential_other_uses"></a>
 ## Potential Other Uses
-<a class="anchor" name="potential_other_uses"></a>
 
 One thing I'd like to talk about is using this device for measuring other things besides Airsoft BBs.
 It is definitely feasible to use OpenChrono to measure the speed of air rifle pellets, and this is something I would be interested in as well.
@@ -646,16 +646,16 @@ All the hot gases coming out of a real gun will probably also be problematic, bo
 
 But all this is not something I can or want to test, and I also do not recommend you do it, either! 👮
 
+<a class="anchor al2" name="links" href="#links"></a>
 ## Links
-<a class="anchor" name="links"></a>
 
 You can find [all the source code and design files for OpenChrono](https://git.xythobuz.de/thomas/OpenChrono) on my [Gitea instance](https://git.xythobuz.de).
 The project is also [mirrored on GitHub](https://github.com/xythobuz/OpenChrono).
 
 If you decide to build it yourself I would be interested in any kind of feedback!
 
+<a class="anchor al2" name="license" href="#license"></a>
 ## License
-<a class="anchor" name="license"></a>
 
 OpenChrono is licensed under the [GNU General Public License](https://www.gnu.org/licenses/gpl-3.0.en.html).
 
@@ -674,8 +674,8 @@ OpenChrono is licensed under the [GNU General Public License](https://www.gnu.or
     You should have received a copy of the GNU General Public License
     along with OpenChrono.  If not, see <https://www.gnu.org/licenses/>.
 
+<a class="anchor al2" name="more_pictures" href="#more_pictures"></a>
 ## More Pictures
-<a class="anchor" name="more_pictures"></a>
 
 <div class="collapse">Some more photographs I didn't use above.</div>
 <div class="collapsecontent">

input/projects/osci_music_player.md

@@ -40,8 +40,8 @@ Skip to the [interesting part](osci_music_player.html#hardware) then!
 * [Hardware](osci_music_player.html#hardware)
 * [Software](osci_music_player.html#software)
 
+<a class="anchor al2" name="introduction" href="#introduction"></a>
 ## Introduction
-<a class="anchor" name="introduction"></a>
 
 An oscilloscope usually displays one or more waveforms of an electrical signal.
 To achieve this a single dot is moved across the screen, with the voltage or amplitude of the signal controlling the vertical deflection (Y axis), and time controlling the horizontal deflection (X axis), meaning the dot automatically moves from left to right with a pre-configured speed.
@@ -70,8 +70,8 @@ lightgallery([
 ])
 %-->
 
+<a class="anchor al2" name="artists" href="#artists"></a>
 ## Artists
-<a class="anchor" name="artists"></a>
 
 To generate the proper sounds you usually need some kind of software or self-written code.
 Many people have already experimented with this, with small scripts running on a PC, or directly on a microcontroller.
@@ -98,8 +98,8 @@ lightgallery([
 ])
 %-->
 
+<a class="anchor al2" name="playback" href="#playback"></a>
 ## Playback
-<a class="anchor" name="playback"></a>
 
 So there are some technical challenges involved in playing these properly on an oscilloscope.
 
@@ -134,8 +134,8 @@ These are DC coupled, support 192kHz and are cheap and easy to get.
 Now the image finally looks like in the YouTube videos.
 The only problem is, this is supposed to be used and operated at Toolbox events, so it needs to be easy to use and kind of sturdy.
 
+<a class="anchor al2" name="oscisettings" href="#oscisettings"></a>
 ## Oscilloscope Settings
-<a class="anchor" name="oscisettings"></a>
 
 To get the proper picture out of your oscilloscope you need to set it up correctly.
 Every oscilloscope has its own kind of front panel buttons, but in general they all have more or less the same kind of settings.
@@ -166,8 +166,8 @@ lightgallery([
 ])
 %-->
 
+<a class="anchor al2" name="hardware" href="#hardware"></a>
 ## Hardware
-<a class="anchor" name="hardware"></a>
 
 We need to consider the environments this device will be used in.
 Both at the Toolbox anniversary, as well as the IBO fair, it will be displayed as part of a public show, with many people walking by and maybe stopping for a short time.
@@ -222,8 +222,8 @@ This worked relatively well.
 Just take care with the lid, it was quite hard in my case, causing it to crack when I tried to drill a hole that was too big.
 But some superglue saved the day.
 
+<a class="anchor al2" name="software" href="#software"></a>
 ## Software
-<a class="anchor" name="software"></a>
 
 I've been using the [Raspberry Pi OS (Legacy, 32bit) Lite](https://downloads.raspberrypi.com/raspios_oldstable_lite_armhf/images/raspios_oldstable_lite_armhf-2023-12-06/2023-12-05-raspios-bullseye-armhf-lite.img.xz) image.
 Install it [as usual](https://www.raspberrypi.com/software/), set up a user account, wireless network connection and SSH login.

input/projects/quadcopters/rc_equipment.md

@@ -95,8 +95,8 @@ lightgallery([
 ])
 %-->
 
+<a class="anchor al2" name="can_storage" href="#can_storage"></a>
 ## Ammo Can Battery Storage
-<a class="anchor" name="can_storage"></a>
 
 For far too long I stored all my LiPos in a cardboard box on a wooden shelf in my livingroom.
 After seeing one too many videos of LiPo fires, I decided to work on a solution for safe storage of the batteries outside, on my balcony. Like with the charger described right above this section, I decided to get some used ammo cans for this project.

input/projects/smarthome/espenv.md

@@ -84,8 +84,8 @@ lightgallery([
 
 The source code can be found [on my Gitea server](https://git.xythobuz.de/thomas/esp-env).
 
+<a class="anchor al2" name="relais_update" href="#relais_update"></a>
 ## Relais Update (August 2022)
-<a class="anchor" name="relais_update"></a>
 
 After successfully using the first [4x relais board](https://amzn.to/3FQdOXB) I ordered to control my bathroom lights and fan for a couple of months, I decided to use two more of the same boards for my livingroom lights.
 This turned out to be quite the feat however.

page.html

@@ -124,6 +124,9 @@ else:
             link = githubCommitBadge(page, True)
             if len(link) > 0:
                 print("<p>Recent activity on GitHub: " + link + "</p>")
+
+            if page.get("auto_toc", "false") == "true":
+                print('<p class="access_link" id="toc_toggle_wrap"></p>')
         %-->
         {{ __content__ }}
         <hr id="footbar">
@@ -137,6 +140,7 @@ else:
                 print('<hr>')
         %-->
     </div>
+    <div id="scroll_up"></div>
     <div id="footer">
         <a href="https://hg.sr.ht/~obensonne/poole">Poole</a>
         &middot;
@@ -159,7 +163,38 @@ else:
         </span>
     </div>
     <script type="text/javascript">
-        function loadPage() {
+        // helper to show or hide scroll-up-button depending on scroll position
+        function scroll_visibility() {
+            if ($(document).scrollTop() > 0) {
+                $("#scroll_up").show("fast");
+            } else {
+                $("#scroll_up").hide("fast");
+            }
+        }
+
+        function add_scroll_up() {
+            // don't show on short pages
+            if ($("html").outerHeight() <= $(window).height()) {
+                return;
+            }
+
+            // add button, initially hidden
+            $("<a>", {
+                text: "⌃",
+                id: "scroll_up_btn",
+                click: function() {
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                    return false;
+                },
+            }).appendTo('#scroll_up');
+            $("#scroll_up").hide();
+
+            // register handler and set initial state
+            scroll_visibility();
+            $(window).scroll(scroll_visibility);
+        }
+
+        function prepare_syntax_highlighting() {
             // adapted from https://sourceforge.net/p/shjs/feature-requests/5/#0940
             $("pre[class^='sh_']").each(function() {
                 // wrap pre with div._sh
@@ -196,14 +231,18 @@ else:
 
             sh_highlightDocument('/js/sh/', '.min.js');
         }
+
+        function loadPage() {
+            add_scroll_up();
+            prepare_syntax_highlighting();
+        }
     </script>
     <script type="text/javascript" src="js/sh_main.js"></script>
     <script type="text/javascript" src="js/jquery.min.js"></script>
     <!--%
         if page.get("comments", "false") == "true":
             print('<script defer src="https://comments.xythobuz.de/js/commento.js"></script>')
-    %-->
-    <!--%
+
         if page.get("auto_toc", "false") == "true":
             print('<script defer src="js/auto_toc.js"></script>')
     %-->

static/css/style.css

@@ -1,6 +1,10 @@
 @import "/css/sh_bright.min.css";
 @import "/css/sh_darkness.min.css" (prefers-color-scheme: dark);
 
+html {
+    scroll-behavior: smooth;
+}
+
 body {
     font-size: 1.2em;
     font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -53,7 +57,42 @@ a.anchor {
     display: block;
     position: relative;
     visibility: hidden;
-    top: -60px;
+    height: 0px;
+    top: -0.5rem;
+}
+
+a.anchor:link:after {
+    content: "🔗";
+    position: relative;
+    visibility: visible;
+    left: -1rem;
+    font-size: 0.8rem;
+}
+
+a.anchor.al2:link:after {
+    top: 2.2rem;
+}
+
+a.anchor.al3:link:after {
+    top: 1.8rem;
+}
+
+a.anchor.al4:link:after {
+    top: 1.9rem;
+}
+
+#scroll_up {
+    display: none;
+}
+
+#scroll_up_btn:hover {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.access_link {
+    font-size: small;
+    display: none;
 }
 
 @media (min-height: 750px) {
@@ -68,7 +107,19 @@ a.anchor {
     }
 
     a.anchor {
-        top: -175px;
+        top: -5.5rem;
+    }
+
+    a.anchor.al2:link:after {
+        top: 7.2rem;
+    }
+
+    a.anchor.al3:link:after {
+        top: 6.8rem;
+    }
+
+    a.anchor.al4:link:after {
+        top: 6.9rem;
     }
 }
 
@@ -76,6 +127,17 @@ a.anchor {
     #content {
         width: 75%;
     }
+
+    #scroll_up {
+        display: block;
+        position: fixed;
+        left: 5%;
+        bottom: 0;
+    }
+
+    .access_link {
+        display: block;
+    }
 }
 
 @media (min-width: 1500px) {
@@ -83,6 +145,10 @@ a.anchor {
         width: 50%;
     }
 
+    #scroll_up {
+        left: 12.5%;
+    }
+
     #navbar {
         position: relative;
         left: 12.5%;
@@ -374,6 +440,10 @@ hr {
     border-radius: 0.125em;
 }
 
+a.anchor:link:after {
+    opacity: 0.666;
+}
+
 /* colors */
 
 :not(pre) > code {

static/js/auto_toc.js

@@ -37,7 +37,7 @@ function generate_toc() {
         output += '<a href="#' + link + '">' + title + '</a>';
         output += '</li>';
 
-        $(this).after('<a class="anchor" name="' + link + '"></a>')
+        $(this).before('<a class="anchor al' + this_level + '" name="' + link + '" href="#' + link + '"></a>')
 
         counters[this_level - 2]++;
     });
@@ -47,4 +47,17 @@ function generate_toc() {
     $("#toc_wrap").html(output);
 }
 
+function register_toc_toggle() {
+    $("<a>", {
+        text: "toggle ToC visibility",
+        href: "",
+        id: "toc_toggle",
+        click: function() {
+            $("#toc_wrap").toggle("fast");
+            return false;
+        },
+    }).appendTo('#toc_toggle_wrap');
+}
+
 generate_toc();
+register_toc_toggle();