beaverbuilder
3/18/2018 - 4:40 PM

Smooth scrolling links

This snippet is used in the following knowledge base article – https://kb.wpbeaverbuilder.com/article/121-smooth-scrolling-links

jQuery( function($){
    var win = $( window );
    
    function bbScroll(){
        if ( 'undefined' != typeof FLBuilderLayoutConfig ) {    
            var offset = 70;
            
            if ( 'undefined' === typeof FLBuilderLayout ) {
                return;
            }
            
            if ( FLBuilderLayout._isMobile() && win.width() < 992 ) {
                offset = 0;
            }
            
            if ( $( 'body.admin-bar' ).length > 0 ) {
                offset += 32;
            }
            
            FLBuilderLayoutConfig.anchorLinkAnimations.duration = 1000;
            FLBuilderLayoutConfig.anchorLinkAnimations.easing = 'swing';
            FLBuilderLayoutConfig.anchorLinkAnimations.offset = offset;
        }
    }
    
    bbScroll();
    win.on( 'resize', bbScroll );
    
} );
jQuery( function(){
    if ( 'undefined' != typeof FLBuilderLayoutConfig ) {    
        FLBuilderLayoutConfig.anchorLinkAnimations.duration = 1000;
        FLBuilderLayoutConfig.anchorLinkAnimations.easing = 'swing';
        FLBuilderLayoutConfig.anchorLinkAnimations.offset = 100;
    }
} );
<a href="#my-div" class="fl-scroll-link">Click Here</a>
<a id="my-div"></a>
<div>
   <p>I want to link to this spot.</p>
</div>