Jump to content

Slow/smooth scroll

Recommended Posts

  • 3 months later...

You can make the scroll speed smooth using this library

nathco/jQuery.scrollSpeed: Extension for custom scrolling speed and easing (github.com)

real example Nathan Rutzky - jQuery.scrollSpeed

Add this to Settings->Advanced->Code Injection, remove jquery if it already included

<script src="https://code.nath.co/src/jQuery.min.js"></script>
<script src="https://rawgit.com/nathco/jQuery.scrollSpeed/master/jQuery.scrollSpeed.js"></script>
<script>
    $(function() {
       jQuery.scrollSpeed(100, 800, 'easeOutCubic');
    });
</script>

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
7 minutes ago, Winther said:

Thanks bangank36

 

Added it to the advanced / header is that how I should do it?

Screen Shot 2021-03-08 at 08.23.18.png

place the snippet on line 5

<script src="https://rawgit.com/nathco/jQuery.scrollSpeed/master/jQuery.scrollSpeed.js"></script>

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 minute ago, bangank36 said:

place the snippet on line 5


<script src="https://rawgit.com/nathco/jQuery.scrollSpeed/master/jQuery.scrollSpeed.js"></script>

Ahh yes of course! awesome thanks a lot. 

Link to comment
  • 1 month later...

@LukasEriksen This works when inserted into Settings->Advanced->Code Injection:

You can test by scrolling with your up/down arrow keys and see how it's smooth vs choppy without it.

<script src="https://code.nath.co/src/jQuery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>

<script>SmoothScroll({
      // Scrolling Core
    animationTime    : 2000, // [ms]
    stepSize         : 100, // [px]

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 3

    // Keyboard Settings
    keyboardSupport   : true,  // option
    arrowScroll       : 50,    // [px]

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Other
    touchpadSupport   : false, // ignore touchpad by default
    fixedBackground   : true, 
    excluded          : ''    
})</script>

 

Link to comment
7 hours ago, provenform said:

@LukasEriksen This works when inserted into Settings->Advanced->Code Injection:

You can test by scrolling with your up/down arrow keys and see how it's smooth vs choppy without it.


<script src="https://code.nath.co/src/jQuery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>

<script>SmoothScroll({
      // Scrolling Core
    animationTime    : 2000, // [ms]
    stepSize         : 100, // [px]

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 3

    // Keyboard Settings
    keyboardSupport   : true,  // option
    arrowScroll       : 50,    // [px]

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Other
    touchpadSupport   : false, // ignore touchpad by default
    fixedBackground   : true, 
    excluded          : ''    
})</script>

 

Thank you so much!

Link to comment
  • 3 months later...
On 4/20/2021 at 8:16 PM, provenform said:

@LukasEriksen This works when inserted into Settings->Advanced->Code Injection:

You can test by scrolling with your up/down arrow keys and see how it's smooth vs choppy without it.

<script src="https://code.nath.co/src/jQuery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>

<script>SmoothScroll({
      // Scrolling Core
    animationTime    : 2000, // [ms]
    stepSize         : 100, // [px]

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 3

    // Keyboard Settings
    keyboardSupport   : true,  // option
    arrowScroll       : 50,    // [px]

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Other
    touchpadSupport   : false, // ignore touchpad by default
    fixedBackground   : true, 
    excluded          : ''    
})</script>

 

Can you also slow the acceleration speed slightly at some sections like in the example website?  (http://robinmastromarino.com/)

Link to comment
  • 1 year later...
On 4/21/2021 at 12:16 AM, provenform said:

@LukasEriksen This works when inserted into Settings->Advanced->Code Injection:

You can test by scrolling with your up/down arrow keys and see how it's smooth vs choppy without it.

<script src="https://code.nath.co/src/jQuery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>

<script>SmoothScroll({
      // Scrolling Core
    animationTime    : 2000, // [ms]
    stepSize         : 100, // [px]

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 3

    // Keyboard Settings
    keyboardSupport   : true,  // option
    arrowScroll       : 50,    // [px]

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Other
    touchpadSupport   : false, // ignore touchpad by default
    fixedBackground   : true, 
    excluded          : ''    
})</script>

 

Its not working on laptop touchpad

Link to comment
  • 6 months later...
On 4/20/2021 at 8:16 PM, provenform said:

@LukasEriksen This works when inserted into Settings->Advanced->Code Injection:

You can test by scrolling with your up/down arrow keys and see how it's smooth vs choppy without it.

<script src="https://code.nath.co/src/jQuery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>

<script>SmoothScroll({
      // Scrolling Core
    animationTime    : 2000, // [ms]
    stepSize         : 100, // [px]

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 3

    // Keyboard Settings
    keyboardSupport   : true,  // option
    arrowScroll       : 50,    // [px]

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Other
    touchpadSupport   : false, // ignore touchpad by default
    fixedBackground   : true, 
    excluded          : ''    
})</script>

 

Can you pls help me how to limit this script only to the desktop so that it is disabled on smaller devices? Thank you.

Link to comment
13 minutes ago, Goashape-Studio said:

Can you pls help me how to limit this script only to the desktop so that it is disabled on smaller devices? Thank you.

I find solution for faster loading at all devices (Im not coder so maybe this is funny solution 🙂 I replace script cdnjs address. And now is mega fast loaded.
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha512-HaoDYc3PGduguBWOSToNc0AWGHBi2Y432Ssp3wNIdlOzrunCtB2qq6FrhtPbo+PlbvRbyi86dr5VQx61eg/daQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>SmoothScroll({
      // Scrolling Core
    animationTime    : 1000, // [ms]
    stepSize         : 200, // [px]

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 3

    // Keyboard Settings
    keyboardSupport   : true,  // option
    arrowScroll       : 50,    // [px]

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Other
    touchpadSupport   : true, // ignore touchpad by default
    fixedBackground   : true, 
    excluded          : ''    
})</script>

Link to comment

For all who looking for "smoothScroll" with fast loading cross device and customize options. Simple paste this code in WEBSITE/WEBSITE TOOLS/CODE INJECTION/HEADER

<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha512-HaoDYc3PGduguBWOSToNc0AWGHBi2Y432Ssp3wNIdlOzrunCtB2qq6FrhtPbo+PlbvRbyi86dr5VQx61eg/daQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>SmoothScroll({
      // Scrolling Core
    animationTime    : 1000, // [ms]
    stepSize         : 200, // [px]

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 3

    // Keyboard Settings
    keyboardSupport   : true,  // option
    arrowScroll       : 50,    // [px]

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Other
    touchpadSupport   : true, // ignore touchpad by default
    fixedBackground   : true, 
    excluded          : ''    
})</script>

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.