Avada Forums Community Forum Scroll to Top (ToTop) Scrolling Speed

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • Jetxpert-Envato
    Blocked
    Post count: 339

    Is their any way to adjust the Scroll to Top (ToTop) scrolling speed via CSS?

    Asking for a friend 🙂

    Thanks!

    Jetxpert-Envato
    Blocked
    Post count: 339

    Amendment:

    … or via PHP code (snippet) inside the functions.php file.

    Cheers!

    Jetxpert-Envato
    Blocked
    Post count: 339

    Update:

    May have found the solution, but only temporary. Still need a permanent solution. The temporary solution is:

    (1) Go to the following Avada folder:

    /wp-content/themes/Avada/assets/min/js/library

    (2) Look for the following file:

    jquery.toTop.js

    (3) Edit the above file:

    Change scrollSpeed:1200 to 0 (click here)

    (4) Save, purge cache, and test.

    Worked well for us, but this change will be erased next time Avada is updated.

    And while we’re on this subject, is their any way we can add a “Scroll to Top” tool tip to the ToTop arrow?

    Thank you!

    Jetxpert-Envato
    Blocked
    Post count: 339

    Clarification:

    Step (3) above:

    Change scrollSpeed:1200 to scrollSpeed:0

    Would be nice if Theme Fusion incorporated an option into Avada to allow changing the toTop scrolling speed to whatever value we wish (from 0 to 2000).

    Cheers!

    Jetxpert-Envato
    Blocked
    Post count: 339

    Bonus:

    Found a way to add a tooltip text for the ToTop button:

    (1) Go to: Avada > Theme Options > Advanced > Code Fields (Tracking etc)

    (2) Enter the following code in the Space before </body> field:

    <a href="#" id="toTop" title="Go to Top"></a>

    Now, would be nice to know how to add CSS styling to the toolip (borders, background color, and text color)

    Cheers!

    marklchaves
    Participant
    Post count: 873

    Hi @Jetxpert-Envato,

    CSS has the scroll-behavior property. It can take auto and smooth. That’s pretty much it. Here’s an example from MDN.

    
    scroll-container {
      display: block;
      width: 350px;
      height: 200px;
      overflow-y: scroll;
      scroll-behavior: smooth;
    }
    

    There are plenty of jQuery solutions out there using the animate API.

    I put together a vanilla JavaScript option if you are interested.

    If you want to implement this in Avada, I would recommend disabling Avada’s toTop. Then, you can add your custom code using my example. I would proably make it a plugin so it’s easier to manage, etc.

    Enjoy!

    Jetxpert-Envato
    Blocked
    Post count: 339

    Hi @mlchavez,

    As always, thank you for your help. Reviewed your info. Pretty awesome.

    Used your CSS code (after restoring Avada’s default value to 1500), but did not notice any difference in the toTop scrolling speed.

    Further, wondering what do the CSS parameters below have to do with simply adjusting the toTop scrolling speed?

    display: block;
    width: 350px;
    height: 200px;

    I’m sure I missed something. Thank you!

    marklchaves
    Participant
    Post count: 873

    Hello @jetxpert-envato,

    Sorry if I wasn’t clear. I’m suggesting a JavaScript solution since CSS will only get you two settings: smooth and auto.

    The CSS that you quote above is for styling my toTop button. scroll-behavior is what you want to adjust if you opt for the CSS-only solution.

    For a JavaScript solution see my CodePen. In the CodePen write up, it tells you which function to look for and what argument to pass for controlling the scroll speed.

    I hope that helps! 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.