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?
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;
});
});
});
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.
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.
@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
= 0
will scroll immediately to the element with no delay.data-scroll-time
= 0.75
will scroll a little faster than the defaultdata-scroll-time
= 1
will scroll just as fast as usualdata-scroll-time
= 1.25
will scroll a little slower than the defaultdata-scroll-time
= 2
will scroll twice as slow as usualdata-scroll-time
= 20
will 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.
TurtleMode™
Hahahaha!
@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.
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!!!
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
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