Search code examples
jquerysmooth-scrolling

Is there a way to disable jQuery scroll animation for some html anchors?


I would like to have every href anchor smooth scrolling by default (this works!) ... and manually prevent some of them to be not.

Is there a smart way to do this? Maybe a "notscrollable" CSS class to target? How would it look like?

jQuery( function ( $ ) {
    'use strict';

    // Smooth scroll on anchor links
    $('a[href^="#"]').on('click', function(e) {
        e.preventDefault();
        var target = this.hash;
        var $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top-20
        }, 900, 'swing', function() {
            window.location.hash = target;
        });
    });

});

All html anchors are smooth scrolling with this script. Good!

Some specific anchors shouldn't be smooth scrollable. This is needed.


Solution

  • just add a new class to a tags, for which you want to be disabled:

    <a class="noscroll"  href="# ...
    

    and change that to:

     $('a[href^="#"]').not(".noscroll").on(...