18010 sujets

Questions générales et questions de débutants

Bug scrolltop et ancres nommées sous ie

Bonjour,

j'ai un souci de scrolltop sous ie, dès ie9.

Je vous montre mon code: 



$(document).ready(function(){
	      $('a[href^="#"]').click(function(){  
              var the_id = $(this).attr("href");  
  
               $('body').animate({  
                scrollTop:$(the_id).offset().top-100 }, 1500); 
	return false  
});  

$(window).scroll(function(){
		
		if($(window).scrollTop() > 175){
			$("#menu").addClass("stick");
			$("#accueil").css('padding-top', 50);
			}
			else{
			$("#menu").removeClass("stick");
			$("#accueil").css('padding-top', 0);
		
			}
		});


.stick{
	position:fixed; top:0px;


Ca fonctionne parfaitement sous chrome et firefox. Mais sous ie,à chaque fois que je clic sur mon lien, la page repart du top. Pouvez vous m'aider ?

Merci pour votre future attention. Smiley smile
Bonjour,

Oui, sous IE, en fonction du doctype et de la version du navigateur, document.body.scrollTop est toujours à 0, et dans ce cas, il faut utiliser document.documentElement.scrollTop
.
En Javascript, définir une valeur scrollTop :
var scrollTop = document.documentElement ? document.documentElement.scrollTop :                   document.body.scrollTop;

Script à adapter avec jquery...
Bonjour naivoo,

Quelques petites modifications sont nécessaires pour régler votre problématique :
1 - Récupérer l'événement de clic.
2 - Bloquer le comportement par défaut ( http://api.jquery.com/event.preventdefault/ ).
3 - Gérer la compatibilité navigateur en appliquant l'animation scroll aux balises <html /> & <body />

Exemple en ligne : http://codepen.io/guiwint/pen/rHbAq
$(document).ready(function(){
    $('a[href^="#"]').click(function(e){ /* (1) */
        e.preventDefault(); /* (2) */
        
        var the_id = $(this).attr("href");
  
        $('html, body').animate({ /* (3) */
            scrollTop: $(the_id).offset().top - 100
        }, 1500);  
    });  

    /* ... */
});


Bonne continuation et bon code...
Modifié par Guiwint (23 Jun 2014 - 16:34)
salut,
en fait le mieux pour récupérer le scroll actuel est de tout simplement passer par "window.pageYOfsset". IE8 ne reconnaîtra pas et si tu es sûr de ne jamais passer en mode Quirck, alors tu peux faire simplement :

var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
Bonjour à tous,

En fait la fonction offset() de jQuery gère déjà l'intercompatibilité (ainsi que quelques erreurs rencontrées avec le BlackBerry 5 et iOS 3).

Exemple dans le fichier http://code.jquery.com/jquery-1.11.1.js - à partir de la ligne 10068 :
offset: function( options ) {
    /* ... */
    return {
        top: box.top  + ( win.pageYOffset || docElem.scrollTop )  - ( docElem.clientTop  || 0 ),
        left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
    };
},

Bonne continuation et bon code...
Sujet clos
Aller à