减速跳转锚定在 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 websites 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

这是我的工作解决方案，但仅针对 menu-anchor 点 (header)。它不适用于 a href 指向锚元素的广告。奇怪...

桌面版：

您必须在第 1182 行 Custom.js 中将函数 et_pb_smooth_scroll 的第三个值设置为 0 -> et_pb_smooth_scroll（目标，假，0）

手机版：

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

减速跳转锚定在 divi 主题中

slow down jump to anchor in divi theme

javascript

wordpress

anchor

smooth-scrolling

divi-theme