Smooth page scroller not working for alt languages (i.e. altered URL structure)

Question

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

Yes it loads without error in the inspector. This is why I thought it must be in the js file. — square_eyes, May 27 '15 at 03:15

score 0 · Answer 1 · answered Jun 25 '15 at 12:02

0

Try changing this part:

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

This selector is choosing all of the tags, try to add a class to to it. Something like this:

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

This function should be on you .js file not on the functions.php file. If you have a different laguage shouldn't affect the script that you have.

answered Jun 25 '15 at 12:02

Mario Sanchez Maselli

1,021
1
12
25

Hi thanks for the help. I tried that and it seemed to break the smooth scroll on both the default page and Spanish page. – square_eyes Jun 27 '15 at 05:24
Am I supposed to do something with the class that has been added? – square_eyes Jun 27 '15 at 05:38
Did you add the more class to the "more" button? – Mario Sanchez Maselli Jun 28 '15 at 15:47
Yes, I used... ` [:en]↓ More ↓[:ES]↓ más ↓[:]` with updated js `$('.morescroll a[href*=#]:not([href=#])')` – square_eyes Jun 29 '15 at 10:35

score 0 · Accepted Answer · answered Aug 25 '15 at 09:58

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

Smooth page scroller not working for alt languages (i.e. altered URL structure)

2 Answers2