SmoothScroll.js

Design help Custom code
1

Hi!

I know nothing to JS and am trying to implement this custom code to my website: Home · gblazex/smoothscroll-for-websites Wiki · GitHub

Looks like everything should simply go into the HEAD tag but for some reason it still doesn’t work:

<script>
window.SmoothScrollOptions = {
    // Scrolling Core
    animationTime    : 2000, // [ms]
    stepSize         : 500, // [px]

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

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

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

    // Other
    touchpadSupport   : false, // ignore touchpad by default
    fixedBackground   : true, 
    excluded          : ''    
}
</script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.9/SmoothScroll.js"></script>

Could someone kindly tell me what I’m doing wrong?

Thanks!

Share link: https://preview.webflow.com/preview/themusicdepartment?utm_source=themusicdepartment&preview=b7029016452eb485925557dbe32823a1

2

Hi @Pierre-Etienne_Pouli,

  1. Scripts are usually better loaded before the </body>, so they will load after the page elements.

  2. The bottom line (the one with the src="https://...") should be first (before the actual script). It is a dependency of the script and it must load before the script.

  3. What is it that you are trying to do? (asking because of this option in webflow)

3

Webflow already have smoothscroll for anchors by deafult - by the way. What you trying to get?

In general first start from codepen - than move this codepen to webflow (Easier flow - because on codepen their is live preview and on webflow on each change you should publish the site (Wait X seconds) → and refresh browser = hard to debug).

Anyway first load the asset - and only than install the plugin.

Fork this and try to solve this (Hard to answer because this is very old plugin without any working example).