jquery Scroll to class name

Question

I have the Html code like below,

<div data-stored="storenow" data-save="save" class="saveIcon" data-unique="game">Save</div>

And I write the jquery to scroll to the gameNo 456 like below.

var container = $("html,body");
var scrollTo = $(this).find('.saveIcon').attr('data-unique', 456);

 container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});

I am using jQuery version 1.9. I am getting error in console:

Cannot read property 'top' of undefined

Is that not possible to scroll to class name instead of id?

But it is working fine in Firefox. But not in chrome or IE.

I try to find the solutions from stackoverflow. But all other solutions are different than my case.

Answer 1

You are not targeting a DOM object, you are targeting a string.

scrollTo = $(this).find('.saveIcon').attr('data-unique', 456); -> this is wrong

So, while you are trying to target an element, you are actually setting the 'data-unique' to the '.saveIcon' element.

Try this:

scrollTo = $('.saveIcon');

Working code:

var $container = $("html,body");
var $scrollTo = $('.saveIcon');

$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300); 

Answer 2

have you looked at scroll to view function?

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

element.scrollIntoView(true);