Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Slow/smooth scroll


maxish

Question

9 answers to this question

Recommended Posts

  • 0

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>

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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>

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

@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
  • 0
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
  • 0
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

Create an account or sign in to comment

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

×
×
  • Create New...