Smooth page scroller not working for alt languages (i.e. changed URL structure)
I have a js that animates a smooth page scroll to a different location when more button is pressed.
It works, but not if a different language is selected for the site. When the user changes the language to, say, Spanish, the URL changes to www.example.com/ES
. It looks like it breaks the sleek scroll that works for www.example.com
.
Clicking on a link more
in Spanish seems to completely reload the page at the scroll position, but no smooth scrolling.
Here is my js. How to turn alt language url into smooth scrolling?
(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 tagged in Wordpress' functions.php and the language plugin I'm using is called qTranslate
source to share
OK finally I got this to work. The language plugin used requires all supported non-primary languages to have a root url that managed to shorten their abbreviation. for example a spanish page might look like example.com/ES/contact
.
The anchor I was using accidentally redirected the Spanish user to the main language because they did not include the / ES / part of the relative url. I just changed the href anchor element from <a href="/#more"
to to <a href="[:en]/#more[:ES]/ES/#more[:]"
include hooks that the language plugin uses to render various elements based on the language used.
So the solution was in the HTML implementation and the javascript file I was calling was fine as it is.
Example http://www.thelucyfoundation.com
source to share
Try changing this part:
$('a[href*=#]:not([href=#])')
This selector selects all tags, tries to add a class to it. Something like that:
$('.more a[href*=#]:not([href=#])')
This function must be in a .js file not in functions.php file. If you have a different level, shouldn't affect the script you have.
source to share