We are using Webflow on a client project and are struggling to get a simple back-to-top link working on the site.
The site is animation heavy and when the user gets to the last section there is a back-to-top CTA that when clicked we want to navigate to the first section instantly without the whole page scrolling.
I see there are numerous posts on the forum regarding this but every avenue and proposed solution we have explored doesn’t seem to work without scrolling through all the content and animations.
Initially we were focusing on the data-scroll-time attribute set to 0 which we have applied to our top section along with a unique ID. We then targeted that section in the CTA link block settings, but with no success.
In one forum post I discovered the link to this gist
After following the steps and adding the data-wf-reduce-scroll-motion and data-wf-scroll-motion=“none” flags to the body, the back-to-top link stills scrolls. Applying these flags in either the designer or with custom JS as provided in the gist doesn’t seem to solve the issue.
Also, having read this university post and following the steps it appears that enabling or disabling the Reduce Motion flag in OSX system prefs has no effect - the scroll still occurs when disabled.
It is also worth noting that there is an error in the published JS code for adding the body flags both in the gist and university post.
$(function() {
// Enable the beta flag
// fails in Chrome OSX because of undefined 2nd argument
document.body.setAttribute('data-wf-reduce-scroll-motion’);
// Eliminate in-page scroll motion
// as a result this also fails.
document.body.setAttribute('data-wf-scroll-motion', 'none’);
});
When investigating my OSX Chrome browser settings under chrome://flags/#smooth-scrolling - Smooth Scrolling is displayed as “unavailable on your platform”
All attempts to implement the suggested approaches to disabling scroll were attempted on a published site. All work is being carried out on MacBook Pro OSX Monterey with up to date Chrome browser.
Has anyone encountered and solved this issue or could a Webflow representative confirm that Motion Settings are behaving as expected?
Any help on this would be greatly appreciated!