jquery faites Défiler jusqu'à un nom de classe

J'ai le code Html comme ci-dessous,

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

Et j'écris le jquery pour faire défiler jusqu'à la gameNo 456 comme ci-dessous.

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

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

Je suis à l'aide de jQuery version 1.9. Je suis d'erreur dans la console:

Impossible de lire la propriété 'top' undefined

N'est-ce pas possible de faire défiler jusqu'à nom de la classe au lieu de l'id?

Mais il fonctionne très bien dans Firefox. Mais pas dans chrome ou IE.

J'essaie de trouver les solutions de stackoverflow. Mais toutes les autres solutions sont différentes de celle de mon cas.

jQuery 9??? John Resig sera choqué ;)

OriginalL'auteur kuttyraj | 2014-06-24

24

Vous n'êtes pas cibler un objet DOM, vous ciblez une chaîne de caractères.
```
scrollTo = $(this).find('.saveIcon').attr('data-unique', 456); -> this is wrong
```
Donc, pendant que vous essayez de cibler un élément, vous êtes en fait le réglage de la "data-unique "à la".saveIcon' élément.

Essayez ceci:
```
scrollTo = $('.saveIcon');
```
Code de travail:
```
var $container = $("html,body");
var $scrollTo = $('.saveIcon');

$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300); 
```
J'ai beaucoup de données unique des valeurs telles que la 456, 567, 789, etc., Et il faut scrollto données de valeur unique. Pour exemple, ici, 456. Merci de me suggérer, Si je me trompe.
vous pouvez essayer ce type de sélecteur: var $scrollTo = $('.saveIcon[données unique="456"]');

OriginalL'auteur RazvanDH
2

avez-vous regardé faites défiler jusqu'à la fonction de vue?

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
```
element.scrollIntoView(true);
```
C'est uniquement pris en charge par Firefox donc pas une bonne solution, c'est une honte parce que c'est simple et fonctionne charmante sur Firefox.
Compatibilité du navigateur remonte à IE8 assez sûr qu'il fonctionne juste ne pas offrir d'autres options.
En fonction de votre lien (developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) la plupart des navigateurs n'ont support de base, seulement FireFox prend en charge scrollIntoViewOptions. Donc oui, il fonctionne, mais c'est expérimental de la technologie de sorte que le comportement pourrait changer dans les futures versions de navigateurs, comme les changements de spécification. Ce serait génial de voir cet être largement pris en charge.

OriginalL'auteur vico

Je suis à l'aide de la suite de la plaine js, s'il vous plaît essayer si vous pouvez l'utiliser en vous 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;
        }
    }
});

OriginalL'auteur Danyu

0

ces deux codes a fonctionné pour moi comme un charme de cette première prendra pour faire défiler vers le haut de la page, mais si vous voulez faire défiler spécifiques à certains div utiliser la seconde avec votre div id.
```
$('body, html, #containerDiv').scrollTop(0);
document.getElementById('yourDivID').scrollIntoView();
```
Si vous voulez faites défiler jusqu'à un nom de classe utiliser le code ci-dessous
```
enter code here
var $container = $("html,body");
var $scrollTo = $('.main-content');

$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + 
$container.scrollTop(), scrollLeft: 0},300);
```
OriginalL'auteur Amir shah

Vous devez vous connecter pour publier un commentaire.