平滑的页面滚动并不适用于所有语言(即改变URL结构)

Question

我有一个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

Answer 1

尝试更改这部分:

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

这个选择器选择了所有的标签，尝试添加一个类到它。像这样:

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

这个函数应该在你的。js文件中，而不是在functions.php文件中。如果你有不同的语言不应该影响你的脚本。

Answer 2

好了，我终于搞定了。我使用的语言插件要求所有支持的非主语言都有根url的缩写。例如，西班牙语页面可能看起来像example.com/ES/contact。

我使用的锚不小心将西班牙语用户重定向回主要语言，因为它省略了相对URL的/ES/部分。我只是将锚href元素从<a href="/#more"更改为<a href="[:en]/#more[:ES]/ES/#more[:]"，以包含语言插件用于根据所使用的语言呈现不同元素的钩子。

所以解决方案是在HTML实现中，我调用的javascript文件很好。

示例:http://www.thelucyfoundation.com