Question posted in
The full documentation can be found here.

slow down jump to anchor in divi theme

I’m using Divi Theme, and after a lot of testing I didn’t find how can I slow down the scrolling animation when jumping to an anchor.
This is a page of my website with a lot of anchors
https://anekitalia.com/come-raggiungerci/
clicking on any of the blurb images, you will scroll down to the related section. There is a custom.js file that I think is related to this, inside there is a function

et_page_load_scroll_to_anchor()

I edited this

var speed    = (distance > 4000) ? 1600 : 800;

to this

var speed    = 200;

but nothing is changed. I know that this theme is using SmoothScroll for websites v1.2.1 for scrolling animations, but editing smoothscroll,js settings only changes the way I’m scrolling with the mouse, not the anchor links.. Any starting point for this?
many thanks

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    this is the part of code located in /wp-content/themes/Divi/js/custom.js you just have to change et_pb_smooth_scroll parameters

    $( 'a[href*="#"]:not([href="#"])' ).click( function() {
    var $this_link = $( this ),
        has_closest_smooth_scroll_disabled = $this_link.closest( '.et_smooth_scroll_disabled' ).length,
        has_closest_woocommerce_tabs = ( $this_link.closest( '.woocommerce-tabs' ).length && $this_link.closest( '.tabs' ).length ),
        has_closest_timetable_tab = $this_link.closest( '.tt_tabs_navigation' ).length,
        has_closest_eab_cal_link = $this_link.closest( '.eab-shortcode_calendar-navigation-link' ).length,
        has_closest_ee_cart_link = $this_link.closest( '.view-cart-lnk' ).length,
        has_acomment_reply = $this_link.hasClass( 'acomment-reply' ),
        is_woocommerce_review_link = $this_link.hasClass( 'woocommerce-review-link' ),
        disable_scroll = has_closest_smooth_scroll_disabled || has_closest_ee_cart_link || has_closest_woocommerce_tabs || has_closest_eab_cal_link || has_acomment_reply || is_woocommerce_review_link || has_closest_timetable_tab;

    if ( ( location.pathname.replace( /^//,'' ) == this.pathname.replace( /^//,'' ) && location.hostname == this.hostname ) && ! disable_scroll ) {
        var target = $( this.hash );
        target = target.length ? target : $( '[name=' + this.hash.slice(1) +']' );
        if ( target.length ) {

            // automatically close fullscreen menu if clicked from there
            if ( $this_link.closest( '.et_pb_fullscreen_menu_opened' ).length > 0 ) {
                et_pb_toggle_fullscreen_menu();
            }

            setTimeout(function() {
                et_pb_smooth_scroll( target, false, 1500 );
            }, 0);

            if ( ! $( '#main-header' ).hasClass( 'et-fixed-header' ) && $( 'body' ).hasClass( 'et_fixed_nav' ) && $( window ).width() > 980 ) {
                setTimeout(function(){
                    et_pb_smooth_scroll( target, false, 40, 'linear' );
                }, 780 );
            }

            return false;
        }
    }
});

  2. 0

    This is my working solution, but just for the menu-anchor points (header). It will not work for blurbs with a href‘s pointing to anchor elements. Strange…

    For desktop:

    You have to set the third value of the function et_pb_smooth_scroll to 0 in the divi’s Custom.js in line 1182 -> et_pb_smooth_scroll (Target, false, 0)

    For mobile:

    In line 1295 the same -> et_pb_smooth_scroll ($ target, top_section, 0)

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

Back To Top
Search