CODEWITHSUNDEEP
phpwordpresswordpress-theming
Jesse Luke Orange
Jesse Luke Orange

Reputation: 1999

$.scrollTo not working in Chrome

I made a simple WordPress site with a theme called OneEngine.

Here is a demo link: https://oneengine.enginethemes.com/

Interestingly, in Chrome the navigation does not appear to work.

I have pinpointed the piece of script responsible for scrolling.

// SCROLL TO
$('#main-menu-top a,ul.slicknav_nav li a').click(function(event){
    event.stopPropagation();
    event.preventDefault();

    console.log('Click event');

    if($(this).hasClass('active'))
        return;

    $('#main-menu-top a').removeClass('active').css('border-bottom-color', 'none');

    $('ul.slicknav_nav li a').removeClass('active');

    $(this).addClass('active');

    if(this.hash == "#home")
        $.scrollTo(0,800);
    else
        $.scrollTo( this.hash, 800, {offset:-$(".sticky-wrapper").height()});

    var bgcolor = $(this.hash).find('span.line-title').css('backgroundColor');

    $(this).css('border-bottom-color', bgcolor);

    $('.slicknav_nav').hide('normal', function() {

        $(this).addClass('slicknav_hidden');

    });

    $('a.slicknav_btn').removeClass('slicknav_open').addClass('slicknav_collapsed');

    return false;
});

$("a#scroll_to").click(function(event) {
    $.scrollTo("#header", 800);
});

I'm confident that the part that isn't working is $.scrollTo();. Typing this into Google yielded window.scrollTo so I changed every instance to window.scrollTo() but this yielded jumpy anchors with no offset.

This section offset:-$(".sticky-wrapper").height() I know is roughly similar to:

var stickyWrapperHeight = $(".sticky-wrapper").height() (which is 76 pixels).

I can't actually find a native scrollTo method as described so I think it may, in fact, be JQuery scrollTo - https://github.com/flesler/jquery.scrollTo

My biggest question would be why doesn't this work in Chrome?

I've seen potential alternatives such as the following:

$("a").on('click', function(event) {

        console.log($(".sticky-wrapper").height())

        var height = $(".sticky-wrapper").height();

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });

Am I just using an outdated version of scrollTo()?

Upvotes: 3

Views: 1730

Answers (1)

Lou
Lou

Reputation: 876

Even if they have SSL problems on their demo page and that you get "$" is not a function if you don't type down jQuery() instead. I noticed that it still doesn't work even when you try to use the plugin right in the console.

The version of scrollTo they use in the theme is outdated and is also known not to work in recent versions of chrome :

https://github.com/flesler/jquery.scrollTo/issues/164

Try it with the latest version, it should work.

Otherwise if for some reason you can't update the plugin you can make it work using something like this :

jQuery('html,body').animate({scrollTop: jQuery("#skills").offset().top}, 'slow');

Upvotes: 2

Related Questions