Faites défiler jusqu’à une div en utilisant jquery

Tout d’abord, votre code ne contient pas de contact div, il a des contacts div!

Dans la barre latérale, vous avez un contact dans le div au bas de la page, vous avez des contacts . J’ai supprimé les s pour l’échantillon de code. (vous avez également mal orthographié l’ID du lien du projectslink dans la barre latérale).

Deuxièmement, jetez un coup d’œil à certains exemples pour cliquer sur la page de référence jQuery. Vous devez utiliser click like, object.click( function() { // Your code here } ); afin de lier un gestionnaire d’événements click à l’object …. Comme dans mon exemple ci-dessous. En passant, vous pouvez aussi simplement déclencher un clic sur un object en l’utilisant sans arguments, comme object.click() .

Troisièmement, scrollTo est un plugin dans jQuery. Je ne sais pas si le plugin est installé. Vous ne pouvez pas utiliser scrollTo() sans le plugin. Dans ce cas, les fonctionnalités que vous désirez ne sont que de 2 lignes de code, donc je ne vois aucune raison d’utiliser le plugin.

Ok, maintenant une solution.

Le code ci-dessous défile au div correct si vous cliquez sur un lien dans la barre latérale. La fenêtre doit être suffisamment grande pour permettre le défilement:

 // This is a functions that scrolls to #{blah}link function goToByScroll(id) { // Remove "link" from the ID id = id.replace("link", ""); // Scroll $('html,body').animate({ scrollTop: $("#" + id).offset().top }, 'slow'); } $("#sidebar > ul > li > a").click(function(e) { // Prevent a page reload when a link is pressed e.preventDefault(); // Call the scroll function goToByScroll(this.id); }); 

Exemple Live

(Faites défiler pour utiliser la fonction prise ici )

PS: Évidemment, vous devriez avoir une raison impérieuse d’utiliser cette route au lieu d’utiliser des balises d’ancrage blah … blah title

Il n’y a pas de méthode .scrollTo() dans jQuery, mais il y en a une .scrollTop() . .scrollTop attend un paramètre, c’est-à-dire la valeur de pixel où la barre de défilement doit défiler.

Exemple:

 $(window).scrollTop(200); 

fera défiler la fenêtre (si le contenu est suffisant).

Vous pouvez donc obtenir cette valeur souhaitée avec .offset() ou .position() .

Exemple:

 $(window).scrollTop($('#contact').offset().top); 

Cela devrait faire défiler l’élément #contact dans la vue.

La méthode alternative non-jQuery est .scrollIntoView() . Vous pouvez appeler cette méthode sur n’importe quel DOM element comme:

 $('#contact')[0].scrollIntoView(true); 

true indique que l’élément est positionné en haut alors que false le place en bas de la vue. La méthode jQuery est pratique, vous pouvez même l’utiliser avec des fx functions comme .animate() . Donc, vous pourriez lisser quelque chose.

Référence: .scrollTop () , .position () , .offset ()

tu peux essayer :

 $("#MediaPlayer").ready(function(){ $("html, body").delay(2000).animate({ scrollTop: $('#MediaPlayer').offset().top }, 2000); }); 

Ajoutez cette petite fonction et utilisez-la comme suit: $('div').scrollTo(500);

 jQuery.fn.extend( { scrollTo : function(speed, easing) { return this.each(function() { var targetOffset = $(this).offset().top; $('html,body').animate({scrollTop: targetOffset}, speed, easing); }); } }); 

OK les gars, c’est une petite solution, mais ça marche bien.

supposons le code suivant:

 
 
1st post
 
2nd post
 
3rd post
  

vous voulez quand un nouveau post est ajouté à ‘the_div_holder’, alors il fait défiler son contenu interne (le div .post) vers le dernier comme un chat. Donc, procédez comme suit chaque fois qu’un nouveau .post est ajouté au détenteur principal du div:

 var scroll = function(div) { var totalHeight = 0; div.find('.post').each(function(){ totalHeight += $(this).outerHeight(); }); div.scrollTop(totalHeight); } // call it: scroll($('#the_div_holder')); 

Tout d’abord, obtenez la position de l’élément div jusqu’à laquelle vous voulez faire défiler la méthode jQuery position ().
Exemple: var pos = $ (“div”). Position ();
Ensuite, obtenez les coordonnées (hauteur) de cet élément avec la méthode ” .top “.
Exemple: pos.top;
Ensuite, obtenez les coordonnées x de l’élément div avec la méthode ” .left “.
Ces méthodes proviennent du positionnement CSS.
Une fois que nous avons des coordonnées x & y, nous pouvons utiliser scrollTo () de javascript ; méthode.
Cette méthode fait défiler le document jusqu’à une hauteur et une largeur spécifiques.
Il prend deux parameters en tant que coordonnées x & y. Syntaxe: window.scrollTo (x, y);
Il suffit ensuite de passer les coordonnées x & y de l’élément DIV dans la fonction scrollTo () .
Reportez-vous à l’exemple ci-dessous ↓ ↓

          Click here to scroll  
 The DIV element.