Hello,
I created a page with navigation. When you click on a link is a smooth scrolling. But I think it’s too slow. Where you can adjust its speed?
Hi @destyle25. Have you read this topic? I’m not sure if this scrolling technique is automatically integrated with Webflow yet, but http://smoothscroll.webflow.com/ uses this technique - does the link cause the page to scroll down at the same speed as in that site? If not, use the code @bartekkustra suggested and I think you can change the speed by changing the ‘900’ on line 8.
$(document).ready(function () {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function() {
window.location.hash = target;
});
});
});
2 Likes
Hi @destyle25, are you hosting with Webflow or exporting the code externally?
If you are exporting, you can tweak some settings in webflow.js. There is a 'duration = ’ assignment that has an equation that calculates the duration of the scroll, based on the number of pixels that need to be scrolled. You can tweak that formula.
2 Likes
Yep, }, 900, 'swing', function() { line stands for the speed of scrolling in ms and the ‘way’ of doing so 
Remember that if you speed it up too much it won’t look nice when scrolling to the bottom of the page.
Thank you!
I found a line in the file webflow.js
duration = 472.143 * Math.log (Math.abs (start - end) +125) - 2000
and replaced in 2000 by 2500.
Now looks nicer.
1 Like
@matthew1818, I just added a new parameter that you can set on your elements to control the scroll speed. Just add a custom attribute. Here are some example values:
-
data-scroll-time=0will scroll immediately to the element with no delay. -
data-scroll-time=0.75will scroll a little faster than the default -
data-scroll-time=1will scroll just as fast as usual -
data-scroll-time=1.25will scroll a little slower than the default -
data-scroll-time=2will scroll twice as slow as usual -
data-scroll-time=20will enable TurtleMode™
You can set the data-scroll-time attribute on your body tag, in which case it will affect all scroll operations on that page. You can also set it on individual elements that you’re scrolling to (so you can have one default scroll speed for all links on the page, with a specific override for one or more individual elements).
I’ll put together a more comprehensive smooth scroll tutorial soon, but in the meantime give it a shot and let me know if you have any trouble with the settings.
19 Likes
TurtleMode™
Hahahaha!
2 Likes
@callmevlad 10-4 it works! Thank you! I’m glad you are going to create a tutorial because I think a lot of other cats will probably be interested in this.
1 Like
Trying to implement this function (data-scroll-time) with no success. Any chance you’ve gotten to that tutorial? Thanks!
Hi, your suggestion to use data-scroll=“mid” is not working. The data-scroll-time=“” works good. In fact WEbflow refusing to scroll to the anchor . Here is my lin to the web page:
Public: https://webflow.com/design/fidsonherbal?preview=fe5caacb73b5f72f287014abc6629cc8
Just what I was looking for! THANKS!!!
1 Like
This was amazing! I had too much fun w/ Turtle Mode ahahaha
is there a possibility to set a “wait” to the anchor scroll fx? maybe with some custom code?
I want to show some interactions before scrolling smooth to the dedicated section.
any suggestions @bartekkustra, @callmevlad, @cyberdave or community?
Thank you
Marius
1 Like
i have the same question. is there a simple way to also add a delay to the scrolling interaction? i would like to fire an interaction first and then scroll to the desired section.
I have the same issue here. I’d like to click a button, interaction rotates button, interaction to send an overlay to 0% opacity, then move to the in-page id link.
Any ideas? @callmevlad
I cannot provide a share link fyi.
tia
1 Like
