Passing an element to function, creating id variable, using this variable to smooth scroll to element

Question

I am trying to work out why the following is happening.

I am trying to:

• Click an element.

• On click, pass a DOM element to a function.

• Use this DOM element within the function to create a target ID.

• Smooth Scroll to this target ID>

Here is my code:

VARIABLE:

var productListQueryResult  = $('#product-list-query-result');

TRIGGER:

scrollToDiv(productListQueryResult);

FUNCTION:

// TO TOP OF ELEMENT
function scrollToDiv(e) {
    var el = e.attr('id');
    $('html, body').animate({
        scrollTop: $("#" + el).offset().top
    }, 300);
    console.log(el);
}
// END TO TOP OF ELEMENT

RESULT:

jquery.js?ver=1.12.4-wp:2 Uncaught Error: Syntax error, unrecognized expression: '#product-list-query-result'

Although this element is in existence. If I run:

var e = jQuery("#product-list-query-result");
console.log(e);

I get two lines returned:

a.fn.init [div#product-list-query-result, context: document, selector: "#product-list-query-result"]
undefined

I'm unsure as to why I get a second line returned too 'undefined', can anyone explain that too?

Hopefully I have provided enough information, if not please feel free to start a discussion.

Edit

I have also tried:

TRIGGER:

scrollToDiv(productListQueryResult.attr('id'));

FUNCTION:

// TO TOP OF ELEMENT
function scrollToDiv(e) {
    var el = "'#" + e + "'";
    $('html, body').animate({
        scrollTop: $(el).offset().top
    }, 300);
    console.log(el);
}
// END TO TOP OF ELEMENT

RESULT:

Uncaught Error: Syntax error, unrecognized expression: '#product-list-query-result'

EDIT (SOLUTION):

If passing a variable into the selector you do not require the ""'s.

FUNCTION:

// TO TOP OF ELEMENT
function scrollToDiv(e) {
    var el = "#" + e;
    $('html, body').animate({
        scrollTop: $(el).offset().top
    }, 300);
    console.log(el);
}
// END TO TOP OF ELEMENT

I am still confused why the first attempt wouldn't have worked, and why the simple test returned an undefined line?

Answer 1

Your code is a bit complicated for what you want to achieve. You are storing a jQuery element into productListQueryResult but then you are retrieving its id in order to get it again by id.

A simpler solution would be:

// We already have the element.
var productListQueryResult  = $('#product-list-query-result');

scrollToDiv(productListQueryResult);

// TO TOP OF ELEMENT
function scrollToDiv(el) {
    // We don't need to get the element again, as we already have it.
    $('html, body').animate({
        scrollTop: el.offset().top
    }, 300);
    console.log(el);
}

As to why your code did not work, your first try worked for me, as you can see in fiddle.

In your second try you were computing the id incorrectly:

var el = "'#" + e + "'";

In this way, el ended up with value "'#product-list-query-result'" (note the single quotes) and that is not a valid selector for jQuery, hence the unrecognized expression error.

As to why the undefined line in your console.log, it doesn't mean that your HTML element was not present. With:

var e = jQuery("#product-list-query-result");
console.log(e);

You got in console:

a.fn.init [div#product-list-query-result, context: document, selector: "#product-list-query-result"]
undefined

The first line is the result of your console.log(e).

The why of the second line is better explained here. In few words, is the return of console.log command that also gets printed.