5568 sujets

Sémantique web et HTML

[Résolu] Doctype HTML5 et boum ! Plus de smoothscrolling !

Bonjour/ Bonsoir,

J'utilisais un smoothscrolling vertical en jQuery sur un site qui était en HTML4 Transitionnal, et tout marchait à merveille, jusqu'au moment où j'ai voulu passer en HTML5.
Le doctype est correct : <!DOCTYPE html> et voici le script :
$(document).ready(function(){
    $('a').click(function(){
    var id = $(this).attr('href');
    scrollTo(id);
    return false;
});

  function scrollTo(target){
    if($(target).length>=1){
      width=$(target).offset().top-130;
    }
    $('body').animate({scrollTop:width}, 1000);
    return false;
  }
});


Ça me parait bizarre mais est ce parce que je n'ai pas encore changé mes <div id="#"> en section que le scrolling ne se fait pas ? Quel est le problème ?

Je ne sais pas trop où poster vu que c'est soit un problème de structure html, soit du côté de jQuery...
Edit : Enfin je pense qu'il y a d'abord un soucis côté HTML car sans parler de smoothscrolling, le déplacement du à l'ancre ne marche même pas.
Modifié par osef_ (09 Jul 2013 - 22:00)
Je suppose que c'est parce que "documentElement" est plus approprié sur certains navigateurs que "body".
Merci à toi pour ta réponse,

J'ai changé body par documentElement :
$(documentElement).animate({scrollTop:width}, 1000);


Les ancres marchent mais sans défilement doux. Et y'a "#lien" qui se rajoute en bout d'URL... Y'a du progrès ! D'autres idées ?
Il n'était pas question de changer body par documentElement mais de mettre un "ou" car en fonction des navigateurs, ça sera ou body ou documentElement.
Le défilement ne se fait pas parce que le lien agit en menant vers l'ancre, il faut donc annuler l'action initial du lien.
Je ne sais pas ce que ça donne en JQuery mais en JS pur, il faut récupérer l'objet Event dans ta fonction pour le clique et annuler l'action.

$(document).ready(function(){
    $('a').click(function(e){
	(e.preventDefault) ? e.preventDefault() : (e.returnValue = false);
    var id = $(this).attr('href');
    scrollTo(id);
    return false;
});

  function scrollTo(target){
    if($(target).length>=1){
      width=$(target).offset().top-130;
    }
    $('body').animate({scrollTop:width}, 1000);
    return false;
  }
});

Je ne sais pas si ça marchera.
J'ai résolu mon problème en modifiant mon script de manière beaucoup plus simple :
$(document).ready(function(){
        $('a[href^="#"]').click(function(){  
        var idlien= $(this).attr("href");  
      
        $('html, body').animate({  
            scrollTop:$(idlien).offset().top-130
        }, 'slow');  
        return false;  
    });  
});


Merci quand même à toi Zelalsan !
Modifié par osef_ (13 Jul 2013 - 20:11)
Sujet clos
Aller à