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.

jQuery 9??? John Resig will be shocked `;)` – Amit Joki Jun 24 '14 at 15:10 — Amit Joki, Jun 24 '14 at 15:10

score 40 · Accepted Answer · edited May 23 '17 at 15:46

40

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);

edited May 23 '17 at 15:46

Travis

168
1
6

answered Jun 24 '14 at 15:17

RazvanDH

762
7
8

I have so many data-unique values such as 456, 567, 789, etc., And it need to scrollto specific data-unique value. For sample, here 456. Please suggest me, If I am wrong. – alagu Jun 24 '14 at 15:23
you can try this type of selector: var $scrollTo = $('.saveIcon[data-unique="456"]'); – RazvanDH Jun 24 '14 at 15:25
2

Just wanted to say thankyou for posting this answer! Helped me fix a menu system in a game im working on, perfect alignment for the scroll to element. – Dexx Nov 21 '20 at 02:46

score 3 · Answer 2 · answered Jun 24 '14 at 15:17

3

have you looked at scroll to view function?

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

element.scrollIntoView(true);

answered Jun 24 '14 at 15:17

vico

2,152
2
17
38

1

This is only supported by Firefox so not a great solution, it's a shame because it's simple and works lovely on Firefox. – alsobubbly Aug 18 '16 at 13:04
@alsobubbly Browser compatibility goes back to IE8 pretty sure it works just doesn't offer other options. – vico Aug 18 '16 at 18:00
According to your link (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) most browsers only have basic support, only FireFox supports scrollIntoViewOptions. So yes it will work but it's experimental technology so the behaviour could change in future versions of browsers as the specification changes. Would be great to see this being widely supported though. – alsobubbly Aug 19 '16 at 07:45

score 3 · Answer 3 · edited Mar 20 '21 at 06:48

these two codes worked for me like a charm this first will take to scroll to the top of the page but if you want to scroll to some specific div use the second one with your div id.

$('body, html, #containerDiv').scrollTop(0);
document.getElementById('yourDivID').scrollIntoView();

If you want to scroll to by a class name use the below code

var $container = $("html,body");
var $scrollTo = $('.main-content');

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

score 1 · Answer 4 · answered Jun 24 '14 at 15:14

I am using following plain js, please try if you can use it in you codes:

$('a.smooth-scroll[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 Scroll to class name

4 Answers4

Linked