Suggestions for Starterkit scroll to top button?

Kirby 2 Solved ✅
1

Hello,

I just finished 3 small Kirby websites which were all based on the Starterkit. These projects have made me a Kirby believer!

I’d like to make all 3 of the sites a little bit more mobile friendly and would like to add a “scroll to top button” (similar to the one that is used on the getkirby website). I know this is more of a CSS question but does anyone have any suggestions for something that would work well with the Starterkit?

Thanks in advance.
Kurt

2

This works fine: https://codyhouse.co/gem/back-to-top/

3

Thank you Kate. That one works and was fairly easy to integrate (with my limited knowledge of these things) but for some reason the button is not displaying on any of the subpages (Projects). I am testing it with a fresh Starterkit install.

Any ideas what the problem might be? I have integrated the button link and script into the footer snippet, right before </body>.

Regards,
Kurt

4

Sorry, I have no idea. I tested it with a starterkit, and I have no problems with subpages… Did you check the source code to see whether the template really does what it is expected to?

5

Check if the button is in the DOM or if you get any Javascript error in console.

6

Thanks for the help so far.

I’m not sure if I am doing this correctly but when I open one of the Starterkit subpages (Project A, B or C) in DOM Inspector in Firefox Web Developer I do not see the button. I see the button for all other top level pages in the DOM Inspector though.

I’m also not 100% I’m checking for Javascript errors in console correctly (I’m loading the Project A page and then hitting Ctrl + Shift + J in Firefox). I am not seeing any errors displayed.

Should I be testing this on the live site instead of the localhost version?

What is different about the Project pages that would make the button not work on them when it works on all top level pages?

Kurt

7

This is a bit strange, if you put the button in the footer and the footer is part of all templates, then the button should be there. Or did you include another footer on the subpages?

8

I am testing the button with a completely fresh install of the 2.2.3 Starterkit. I have not made any changes to any of the template or snippet files (other than adding the button code to the footer snippet). The button I am trying to use is: https://codyhouse.co/gem/back-to-top/. Maybe there is something in the CSS that is hiding the button in subpages? When I look at the page source for one of the Project pages I am seeing the button code displayed in the footer.

Kurt

9

Ok, I see, that’s why I asked above about the DOM and you said it wasn’t there. So, it’s either a CSS or a javascript problem. Please check in the DOM if the class changes when you scroll down.

10

Now I have tried embedding the button link without adding any of the CSS button styling to my stylesheet. This makes the button appear on all pages (including the Project subpages) but when I click on “Top” on a subpage the scroll to top does not work. Clicking on “Top” on all top level pages works just fine. So now I can see the button on the subpages but it is not functional (although when I hover over it I am seeing the target - localhost/starterkit/projects/project-a#0).

I’m not sure what you mean by:

Please check in the DOM if the class changes when you scroll down.

Kurt

11

Well, if you scroll down, jquery adds a new class cd-is-visible to the button, so that the button becomes visible. You can observe that in the DOM, the class is added when you scroll down and is removed again if you scroll up.

12

If I change:

<a href="#0" class="cd-top">Top</a>

to:

<a href="#" class="cd-top">Top</a>

in the footer snippet, the button is visible on subpages and also scrolls me to the top when I click on it but it “jumps” quickly to the top and does not have the smooth scroll that “#0” gives me. What is going on here?

Kurt

13

Did you think of that you must implement the full path of the script?
So this works: <script src="http://localhost/assets/js/main.js"></script>

or

<?php echo js(array(
   'assets/js/main.js',
)) ?>

But not this:

<script src="assets/js/main.js"></script>

14

Kate,

I did not have the full path of the script and thought that would be the solution but even after updating to the full path the problem remains. The button appears and works fine on normal top level pages (with or without the full path of the script) but still does not appear or work on subpages. Is it working for you on subpages in the latest version of the Starterkit (2.2.3)?

Perhaps I need to find another script.

Kurt

15

For me it’s working fine on Kirby 2.2.3. You mention that you test the script in Firefox. Sometimes you need to press the refresh-button in FF several times until a page really is refreshed. The order of the scripts is as it should? jQuery is there?

16

The script works, it must be a problem with your implementation.

17

Yes. I tried changing to the full path and refreshing multiple times and this time it worked!

Thanks so much for your help and your patience with me!

Regards,
Kurt