减慢跳转到divi主题中的锚点

Question

我正在使用 Divi 主题，经过大量测试后，我没有找到如何在跳转到锚点时减慢滚动动画的速度。 这是我网站的一个页面，有很多锚点https://anekitalia.com/come-raggiungerci/单击任何模糊图像，您将向下滚动到相关部分。 有一个我认为与此相关的 custom.js 文件，里面有一个函数

et_page_load_scroll_to_anchor()

我编辑了这个

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

对此

var speed    = 200;

但没有任何改变。 我知道这个主题使用 SmoothScroll for website v1.2.1 来滚动动画，但是编辑 smoothscroll,js 设置只会改变我用鼠标滚动的方式，而不是锚链接..有什么起点吗？ 非常感谢

Answer 1

这是位于 /wp-content/themes/Divi/js/custom.js 中的代码部分，您只需更改 et_pb_smooth_scroll 参数

$( '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;
        }
    }
});

Answer 2

这是我的工作解决方案，但仅适用于菜单锚点（标题）。 它不适用于带有a href指向锚元素的简介。 奇怪的...

对于桌面：

您必须在第 1182 行的 divi 的Custom.js中将函数 et_pb_smooth_scroll 的第三个值设置为 0 -> et_pb_smooth_scroll (Target, false, 0)

对于手机：

在第 1295行相同 -> et_pb_smooth_scroll ($ target, top_section, 0)