Гладкая прокрутка страницы не работает для альтернативных языков (т.е. измененная структура URL)

У меня есть js, который анимирует плавную прокрутку страницы в другое место, когда нажимается дополнительная кнопка.

Это работает, но нет, если для сайта выбран другой язык. Когда пользователь меняет язык, скажем, на испанский, URL-адрес меняется на www.example.com/ES, Это, кажется, нарушает плавную прокрутку, которая работает на www.example.com,

Нажав на more ссылка на испанском языке, кажется, полностью перезагружает страницу, в месте прокрутки, но без плавной прокрутки.

Вот мой JS. Как я могу включить URL альтернативного языка в гладкую прокрутку?

(function($){

        $(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

})(jQuery);

Редактировать: для справки скрипт ставится в очередь в Wordpress' functions.php, а используемый мной языковой плагин называется qTranslate

Источник

2 ответа

Решение

ОК, я наконец получил это на работу. Языковой плагин, который я использую, требует, чтобы все поддерживаемые неосновные языки имели корневые URL, за которыми следуют их сокращения. например, испанская страница может выглядеть example.com/ES/contact,

Якорь, который я использовал, случайно перенаправлял испанского пользователя обратно на основной язык, потому что в нем отсутствовала часть /ES/ относительного URL. Я просто изменил свой элемент привязки <a href="/#more" в <a href="[:en]/#more[:ES]/ES/#more[:]", чтобы включить хуки, которые языковой плагин использует для визуализации различных элементов в зависимости от используемого языка.

Таким образом, решение было в реализации HTML, и файл javascript, который я вызывал, был в порядке.

Пример на http://www.thelucyfoundation.com/

Источник

Попробуйте изменить эту часть:

$('a[href*=#]:not([href=#])')

Этот селектор выбирает все теги, попробуйте добавить к нему класс. Что-то вроде этого:

$('.more a[href*=#]:not([href=#])')

Эта функция должна быть в вашем файле.js, а не в файле functions.php. Если у вас другой язык, это не должно влиять на ваш скрипт.

Источник
Другие вопросы по тегам