I have a js that animates a smooth page scroll to another location when a more button is clicked.
It works, but not if another language for the site is selected. When a user changes language, say, to Spanish, the URL changes to www.example.com/ES
. This seems to break the smooth scroll, which works on www.example.com
.
Clicking the more
link in Spanish seems to completely reload the page, in the scroll location, but without the smooth scrolling.
Here is my js. How can I include the alt language url in the smooth scroll?
(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);
Edit: For reference the script is enqueued in Wordpress' functions.php and the language plugin I am using is called qTranslate
OK I finally got this to work. The language plugin I use requires that all supported non-primary languages have root url's succeeded by their abbreviation. e.g. a Spanish page might look like example.com/ES/contact
.
The anchor I was using was accidentally redirecting a Spanish user back to the primary language because it was omitting the /ES/ part of the relative URL. I simply changed my anchor href element from <a href="/#more"
to <a href="[:en]/#more[:ES]/ES/#more[:]"
, to include the hooks that the language plugin uses to render different elements based on the language being used.
So the solution was in the HTML implementation and the javascript file I was calling was fine as it is.
Example at http://www.thelucyfoundation.com