Anchors do not work with jquery 3.x

[FionNoir]

By using jquery 3.3.1 the anchor passed by the URL isn't working. So the page always start with the frist view (langing page). It works fine with jquery 1.x. I want to use a newer jquery version cause of other frameworks in my project.

[alvarotrigo]

Can you please provide an isolated reproduction of the issue?

[cnakh]

I use jQuery 3.4.1 got the problem with anchor. After changed to <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>, it works normally.

[alvarotrigo]

I'll wait for an isolated reproduction of the issue in jsfiddle or codepen.

[shurshilov]

what waiting your lib don work with jquery 3.3.1

[alvarotrigo]

Can you provide an isolated reproduction of it? I would however recommend you to move to fullPage.js. It's the all-powerful big brother :)

[shurshilov]

               Ijust now added after render click handler and it work, but if we use custom menu on scroll it change but on click in Jquery 3.3.1 it doesnt work
                $('#full-page').pagepiling({
                    navigation: false,
                    verticalCentered: false,
                    anchors: ['section1', 'section2', 'section3', 'section4'],
                    menu: '.nav_index-page',
                    afterRender: function(){
                        $('[data-menuanchor="section1"]').on('click', (e)=>{
                            $.fn.pagepiling.moveTo(1);
                            $('[data-menuanchor*="section"]').removeClass('active')
                            $(e.currentTarget).addClass('active')
                        })
                        $('[data-menuanchor="section2"]').on('click', (e)=>{
                            $.fn.pagepiling.moveTo(2);
                            $('[data-menuanchor*="section"]').removeClass('active')
                            $(e.currentTarget).addClass('active')
                        })
                        $('[data-menuanchor="section3"]').on('click', (e)=>{
                            $.fn.pagepiling.moveTo(3);
                            $('[data-menuanchor*="section"]').removeClass('active')
                            $(e.currentTarget).addClass('active')
                        })
                        $('[data-menuanchor="section4"]').on('click', (e)=>{
                            $.fn.pagepiling.moveTo(4);
                            $('[data-menuanchor*="section"]').removeClass('active')
                            $(e.currentTarget).addClass('active')
                        })
                    },
                    afterLoad: function (anchorLink, index) {
                        if (index === 1) {
                            $section__text_block.addClass('animate');
                        } else if (index === 3) {
                            $custom_wrap.addClass('body_bg_white');
                            $section3_header.addClass('animate');
                            $section3_subheader.addClass('animate');
                            // $('.slider').slick('slickGoTo', 0);
                        } else if (index === 2) {
                            $section2_header.addClass('animate');
                            $section__block.each(function (index) {
                                $(this).css('transition-delay', (index * 200) + 'ms');
                            });
                            $section__block.addClass('animate');
                        } else if (index === 4) {
                            $custom_wrap.addClass('body_bg_blue');
                            $section__address.each(function (index) {
                                $(this).addClass('animate');
                            });
                        }
                    },
                    onLeave: function (index, nextIndex, direction) {
                        $custom_wrap.removeClass('body_bg_white body_bg_blue');
                        $section__text_block.removeClass('animate');
                        $section2_header.removeClass('animate');
                        $section3_header.removeClass('animate');
                        $section3_subheader.removeClass('animate');
                        $('#section2 .section__block').removeClass('animate');
                        $section__address.each(function (index) {
                            $(this).removeClass('animate');
                        });
                    }
                });

[alvarotrigo]

Link to jsfiddle or codepen please?

[alvarotrigo]

Also, remove all the content in every callback. Just need an isolated reproduction. Replace those for console.log