Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Deactivate smooth scrolling elementor

I have made a website all in a page with anchor links set. When I click on the menu contact item it scrolls smoothly right down to the "Contact" section. I want to delete the smooth scrolling effect and redirect straight away to that section without scrolling slowly to the bottom of the page.

I’m using the elementor builder with wordpress. Is there a Jquery function or CSS code that can remove the smooth scrolling?

Thank you in advance for your help.

Tags:

2

Answers


  1. 0

    Unfortunatly, Elementor has no easy way to remove this option.

    However, there are some ways to work around it. What I have done in the past is to simply use a HTML Widget instead of an anchor widget.

    Basically, put the HTML Widget where you would need your users to land after clicking your link, and manually add an empty div that represents the anchor, like so:

    <div id="no-smooth-scroll"></div>

    Your link : #no-smooth-scroll should now take your users to where the div is without the smooth scroll option.

    Just tested this workaround to make sure it still works, and it does on my website.

    Hope it works for you !

    Login or Signup to reply.
  2. 0

    There is no UI option in Elementor to disable smooth scroll, however it can certainly be disabled using an option below (uses Elementor JS Hooks).

    Option 1 using Code Snippets plugin – arguably the best way since it doesn’t require Elementor Pro and because it ensures that Elementor is loaded before the script runs.

    Copy this- you’ll use it in Step 3

    // add inline script to disable elementor smooth scroll
add_action( 'wp_enqueue_scripts', function() {
   wp_add_inline_script( 'elementor-frontend', "jQuery(window).on('elementor/frontend/init',function(){if(typeof elementorFrontend==='undefined'){return}elementorFrontend.on('components:init',function(){elementorFrontend.utils.anchors.setSettings('selectors.targets','.dummy-selector')})});" );
} );
    1. Install and Activate Code Snippets plugin
    2. WP Admin > Code Snippets > Add New and insert a title such as disable elementor smooth scroll
    3. Paste the code directly above into the editor.
    4. Set the snippet to run on the front-end only
    5. Save and activate the snippet

    Option 2 using Elementor Pro

    Copy this- you’ll use it in Step 3.

    <script defer>
jQuery( window ).on( 'elementor/frontend/init', function() {
    if ( typeof elementorFrontend === 'undefined' ) {
        return;
    }

    elementorFrontend.on( 'components:init', function() {
        elementorFrontend.utils.anchors.setSettings( 'selectors.targets', '.dummy-selector' );
    } );
} );
</script>
    1. WP Admin > Elementor > Custom Code
    2. Add New and insert a title such as disable elementor smooth scroll
    3. Paste the code directly above into the editor.
    4. Set Location to <body> - End (this is a drop-down above the code editor)
    5. Set Priority to 10 (also a drop-down above code editor) – not necessary but I see no reason to make this load before other scripts
    6. Publish with default Condition set to Entire Site or set to whatever conditions you need.

    Option 3 using a custom JS plugin such as Simple Custom CSS and JS

    Note: these are general directions – follow the plugin docs for exact implementation.

    1. Install and activate custom JS plugin of choice.
    2. Create a new script item.
    3. Add a script block using the JS code from option 2 of this answer – you may or may not need the script tags depending on your plugin.
    4. Save (and maybe activate) it. You may need to set the priority so it loads after Elementor.

    Option 4 using child theme

    If you understand the heading, then you’re a theme developer, so I’ll simply say that you can monkey it into your functions.php file, a template file, or add the JS code (within a <script> block) to its own .js file and include it however you like.

    AS ALWAYS, CLEAR CACHE

    After completing any procedure above and testing, if you use any local caching plugins, clear them. If you use Cloudflare or a CDN, purge it.

    Credit

    @jamesckemp’s awesome solution to disable Elementor smooth scroll on github

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search