减速跳转以锚定在divi主题

时间:2019-06-18 08:56:39

标签: javascript wordpress anchor smooth-scrolling divi-theme

我正在使用Divi Theme,经过大量测试后,我发现跳到锚点时如何放慢滚动动画的速度。 这是我网站上有很多锚点的页面     https://anekitalia.com/come-raggiungerci/ 单击任何Blurb图像,您将向下滚动到相关部分。我认为有一个与此相关的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设置只会更改我用鼠标滚动的方式,而不是锚链接。 非常感谢

2 个答案:

答案 0 :(得分:0)

这是/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;
        }
    }
});

答案 1 :(得分:0)

这是我的工作解决方案,但仅适用于菜单锚点(标题)。它不适用于a href指向锚点元素的Blub。奇怪...

对于台式机:

您必须在第1182行-> et_pb_smooth_scroll ()中的div Custom.js 中将函数et_pb_smooth_scroll的第三值设置为0目标,错误,0)

对于移动设备:

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