I get an `Cannot read property 'slice' of undefined` message when I use the scrollTo jQuery plugin inside this function

Question

I'm using the jQuery scrollTo plugin.

I get this error in my JS Console:

16827Uncaught TypeError: Cannot read property 'slice' of undefined
d.fn.scrollToindex.html.js:16827
jQuery.extend.eachindex.html.js:662
d.fn.scrollToindex.html.js:16827
jQuery.extend.eachindex.html.js:662
jQuery.fn.jQuery.eachindex.html.js:276
d.fn.scrollToindex.html.js:16827
popupPlaceindex.html.js:18034
(anonymous function)index.html.js:17745
jQuery.extend._Deferred.deferred.resolveWithindex.html.js:1018
doneindex.html.js:7247
jQuery.ajaxTransport.send.script.onload.script.onreadystatechange

When I place $(".menu").scrollTo( $("li.matched").attr("id"), 800 ); inside it.

function popupPlace(dict) {
    $popup = $('div#dish-popup');
    $popup.render(dict,window.dishPopupTemplate);
    if(typeof(dict.dish) === 'undefined') {
        $popup.addClass('place-only');
    } else {
        $popup.removeClass('place-only');
    }

    var $place = $('div#dish-popup div.place');
    var place_id = dict.place._id;
    if(liked[place_id]) {
        $place.addClass('liked');
    } else {
        $place.removeClass('liked');
    }
    if(dict.place.likes) {
        $place.addClass('has-likes');
    } else {
        $place.addClass('zero-likes');
    }


    var tokens = window.currentSearchTermTokens;
    var tokenRegex = tokens && new RegExp($.map(tokens, RegExp.escape).join('|'), 'gi');
    $.each(dict.place.products, function(n, product) {
        $product = $('#menu-item-'+product.id);
        if(liked[place_id+'/'+product.id]) {
            $product.addClass('liked');
        }
        if(tokens && matchesDish(product, tokens)) {
            $product.addClass('matched');
            $product.highlight(tokenRegex);
        } else {
            $product.removeClass('matched');
            $product.removeHighlight();
        }
        if(product.likes) {
            $product.addClass('has-likes');
        } else {
            $product.addClass('zero-likes');
        }
    });

    $('#overlay').show();
    $('#dish-popup-container').show();

    // Scroll to matched dish
    //$("a#scrolll").attr("href", "#" + $("li.matched").attr("id"));
    //$("a#scrolll").attr("href", "#" + $("li.matched").attr("id"));
    //$("a#scrolll").trigger("click");
    $(".menu").scrollTo( $("li.matched").attr("id"), 800 );

    // Hide dish results on mobile devices to prevent having a blank space at the bottom of the site
    if (Modernizr.mq('only screen and (max-width: 640px)')) {
        $('ol.results').hide();
    }

    $(".close-dish-popup").click(function() {
        $("#overlay").hide();
        $("#dish-popup-container").hide();
        $('ol.results').show();
        changeState({}, ['dish', 'place', 'serp']);
    });

    showPopupMap(dict.place, "dish-popup-map");
}

Any suggestion to fix this?

Answer 1

What are you trying to scroll to? I found my problem was that I was trying to scroll to an anchor, but I had only specified the name, not the id. If you just set the id the same as the name, it should work, assuming that is your issue.

Answer 2

I just opened a pull request that will fix the problem with targets that don't exist.

You can see the change on my fork: https://github.com/boena/jquery.scrollTo