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

3 Views

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.

Read More

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

Post Views: 3

Related posts

2 comments

  1. 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.

  2. 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

Comments are closed.