11548 sujets

JavaScript, DOM et API Web HTML5

Décaler de quelques pixels un défilement fluide d'ancres

Bonjour ou bonsoir !

J'ai ici un petit script trouvé sur le net (Oui je sais c'est maaal de recopier sans comprendre !) qui me fait des défilements fluides sur mes ancres qui marche à merveille. Seulement voilà, je l'utilise sur un site avec un header en position:fixed et j'aurais donc besoin d'ajouter quelques pixels au déplacement dans la page (130px exactement) pour qu'une partie du contenu ne soit pas caché sous le header.
J'ai beau me plonger dans le code, je n'y comprends pas grand chose...
    $(function() {
      var scrollElement = $("html");
      var scrollValue = scrollElement.scrollTop();
      if (scrollElement.scrollTop(scrollValue + 1).scrollTop() == scrollValue) {
        scrollElement = $("body");
      }
      else {
        scrollElement.scrollTop(scrollValue);
      }
      $("a[href*=#]").click(function() {
        if (location.hostname+location.pathname+location.search == this.hostname+this.pathname.replace(/^([^\/].*)/, "/$1")+this.search) {
          var hash = "#"+$(this).attr("href").split("#")[1];
          var target = $(hash == "#" ? body : hash);
          if (target.length) {
            var id = target.attr("id");
            target.attr("id", "");
            location.hash = hash;
            target.attr("id", id);
            var to = target.offset().top;
            scrollElement.animate({ scrollTop: to }, {
              duration: Math.abs($(window).scrollTop() - to) * 0.75,
              complete: function() { target.focus(); }
            });
            return false;
          }
        }
      });
    });
Salut,

var to = target.offset().top;

Récupération de la position "top" de l'élément ciblé...

scrollElement.animate({ scrollTop: to }

Défilement jusqu'à la position donnée...

Tu peux ajouter ton décalage à l'emplacement de ton choix !

tm
D'accord mais comment additionner 130px ? J'imagine que ce n'est pas : 
var to = target.offset().top+130px;
Presque !

Je t'invite à utiliser une console dans ton navigateur (outils chrome, firebug, ...).
Lorsque tu exécutes "console.log(quelquechose);", tu peux mieux visualiser ce "quelquechose".
Dans ton cas, tu peux afficher le contenu de la variable "to" : 
var to = target.offset().top;
console.log(to);

Si le doute subsiste, tu peux aussi facilement connaître le type de ta variable via : 
console.log( typeof(to) );

Du coup, tu peux mieux comprendre ce que tu peux faire (ou pas) avec les données récupérées.
Par ailleurs, la doc peut aussi aider...

Smiley lol

tm
Bon je vais essayer comme ça ! Même si je galère un peu... Hier soir, j'ai réussis à déplacer les titres où y'a les ancres en haut de la page, au lieu de déplacer la page elle même ... Smiley biggol
Je te tiens au courant !
Modifié par osef_ (26 Sep 2012 - 10:20)
connaissant jquery, je pense qu'il ne faut pas préciser les pixels, ce qui doit donner : 

var to = target.offset().top + 130;
Rebonjour ! Je reviens vers vous via ce sujet car mon problème est à peu près le même.

Depuis la dernière fois, mon site à quelque peu changé. Le site est horizontal avec un scrolling horizontal aussi, et avec toujours un header en position:fixed mais sur la gauche cette fois.
L'aspect général me plaît bien sauf que j'ai quelques questions qui me turlupine. Je souhaite faire un design qui passe sur la plupart des formats d'écran.

Je suis tombé sur la propriété .width() qui semble idéale. Premièrement, est il possible dans mon cas de prendre donc la largeur de la fenêtre du navigateur et de l'appliquer sur la partie "contenu" de mon site ? (C'est à dire : largeur fenêtre - largeur header ?) Deuxièmement , comment faire avec les personnes qui naviguent avec javascript désactivé ? Y'a t'il une solution plus simple ?
Modifié par osef_ (30 Sep 2012 - 17:56)
Sujet clos
Aller à