Can't scroll back up when anchor links are clicked

[smallio]

Hi guys working on a website for a client so quite urgent.

Everything is working perfectly aside from being able to scroll back up once an anchor link is clicked.

Any ideas what's going on / how to solve this?

Site is here: https://braingaintest.webflow.io/

Cheers!

[filipdahl]

Hi I have the sam issue, how did you solve it? Thanks:)

[DonSeve]

Same here

[thevectorbox]

Make sure your all sections are Loaded with image

$(window).on("load", function() {
   locoScroll.update();
});

Solved my Issue

[jeydi243]

@Shikarikashikari ca n you explain please?

[thevectorbox]

@Shikarikashikari ca n you explain please?

Yes is how I do it

const locoScroll = new LocomotiveScroll({
    el: document.querySelector(".locomotive-scroll"),
    smooth: true,
    multiplier: 1.0,
    class: 'in-view',
    reloadOnContextChange: true,
    smartphone: {
        smooth: false
    },
    tablet: {
        smooth: false
    },
	  smoothMobile: 0,
});

$(window).on("load", function() {
   locoScroll.update();
});

All you need to do is update the locoscroll after the window is loaded, so with that, locoscroll can calculate the image height

[jamesla]

Hmm doesn't work for me - anybody found any other solutions?

[mykt0ngc0]

Hey guys, try the snippet I shared here 👉 https://github.com/locomotivemtl/locomotive-scroll/issues/175#issuecomment-1082541029

[menachemspielman]

Hey guys, try the snippet I shared here 👉 #175 (comment)

How can I apply this in WebFlow, where I don't have access to the Locomotive code (I'm using a copy-paste that goes in the body section in the site settings)? I'm also having problems with the anchor link going too far because Locomotive is confusing it, but can't use this workaround (https://www.youtube.com/watch?v=dG2uumcwX7s) as WebFlow doesn't allow "#" or "|" in the attributes section.

Thanks!

[mykt0ngc0]

@menachemspielman Just wrap the snippet with script tags like this:

<script>
/* Your Locomotive anchor scroll snippet here */
</script>

...then paste it to the "Before

tag" section under Custom code.

You can read it here: https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tags#before-the-%3C/body%3E-tag

[menachemspielman]

@menachemspielman Just wrap the snippet with script tags like this:

<script>
/* Your Locomotive anchor scroll snippet here */
</script>

...then paste it to the "Before tag" section under Custom code.

You can read it here: https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tags#before-the-%3C/body%3E-tag

Thank you so much, that worked perfectly!

[menachemspielman]

@menachemspielman Just wrap the snippet with script tags like this:

<script>
/* Your Locomotive anchor scroll snippet here */
</script>

...then paste it to the "Before tag" section under Custom code.

You can read it here: https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tags#before-the-%3C/body%3E-tag

Two more questions, if that's okay:

1. Could something be interfering with my 'back to top' button? All my other navigation is working fine, but can't get that one to work...

2. I'm trying to get the background to change when scrolling. I understand this may not be compatible with Locomotive. Is there any workaround that can make it work as it does in preview mode currently?

https://preview.webflow.com/preview/mspielman-com?utm_medium=preview_link&utm_source=designer&utm_content=mspielman-com&preview=0992bc7a66465b90ef14b23b15a4cbd2&workflow=preview

Thank you again! This is my first WebFlow site, and I really appreciate the help.