offset vertical sur les ancres nommées (sans le click)

FactureHero.com
Javascript

Bonjour , je coince sur un truc qui doit être vraiment bête à réaliser :)
Je sais utiliser appliquer un offset vertical sur une ancre Id en Jqury ou JS ' au click de l'utilisateur ' sur la page, mais pas si le lien vient de l'extérieur.

Explication : je voudrai que ce type de lien : "http://monlien.com#mon-ancre"
amène le visiteur extérieur qui le clique, non seulement au niveau de l'id #mon-ancre (ça c'est automatiquement interprété par les navigateurs pas de souci), mais surtout de lui appliquer un offset vertical (de -40px par exemple)

Et je coince :) si qq a une idée de comment je peux faire ça en Juery ou Js, ça m'aiderait bien.

7 réponses

Amstramgram
Réponse acceptée

Bonjour, je pense qu'il faut faire la même chose que ce que tu fais au click mais le mettre au chargement de ta page.

betaWeb
Réponse acceptée

Il te faut récupérer le hash de ta page lorsque celle-ci est chargée (window.location.hash) et lancer ton animation. Pas besoin du click, il te faut juste lancer une fonction lorsque ta page est chargée ;)

Amstramgram
Réponse acceptée

Ca fonctionnne ca ? Je sais pas trop, à tester.

$(document).ready(function() {
var hash = window.location.hash
var spacer = 40;
var speed = 750;

$("html, body").animate({scrollTop:$(hash).offset().top - spacer }, speed);

});
FactureHero.com
Auteur
Réponse acceptée

Je précise un truc important parce que j'ai rencontré le problème, la fonction peut créer des conflits si elle est telle quelle et qu'il se trouve qu'il n'y a pas de hash (#) dans l'URL. du coup une ligne suffit pour détecter si oui ou non il y a un hash dans l'URL, sinon on stoppe la fonction. Ca donne ceci : 

    $(document).ready(function() {
    var hash = window.location.hash ;
    if (!hash) return; // S'il n'y a pas de hash, on stoppe la fonction 
    var speed = 750; // Durée de l'animation (en ms)
    $('html, body').animate( { scrollTop: $(hash).offset().top - 120}, speed ); // Go   
    });

Merci à vous pour les pistes et @+ sur GA ;)

Fred

FactureHero.com
Auteur

Merci de ta réponse Amstramgram, J'y ai pensé Après J'ai du mal à gérer ça sans l'événement click, je ne vois pas du tout comment coder ça en fait :)
Avec le click j'aurai fait à peu près ça : 

// Pour tous les div commençant par #comment-id.
$("#comment-id').click(function (e) {
e.preventDefault();
// j'ajoute un offset à l'ancre nommé.
$(window).scrollTop( $(window).scrollTop() - 40 );
});

Si qq voit l'évolution possible pour gérer ça "au chargement de la page" si on a une url du type : www.monUrl.com#comment-id, je suis preneur :)

FactureHero.com
Auteur

Merci beaucoup Cyprien et Amstramgram ;)
Après quelques essais, c'est Ok et je vous donne mon code (pas besoin de plugin ScrollTo, ça fonctionne avec Jquery tout simplement) et au chargement de la page, j'ai bien ma jolie animation qui se fait vers mon ancre et je peu gérer l'offset (ici -120) : 

    $(document).ready(function() {
    var hash = window.location.hash ;
            var speed = 750; // Durée de l'animation (en ms)
            $('html, body').animate( { scrollTop: $(hash).offset().top - 120}, speed ); // Go
            return false;
    });

Merci à vous :)

FactureHero.com
Auteur

Le but était d'amener le visiteur directement sur un commentaire précis de la page quand il clique sur un lien qu'il réçoit par Email (notification de réponse à son commentaire) - Ainsi il arrive bien sur la page et il a droit à petit scroll qui mène vers la réponse à son commentaire (une ancre #id) - Le petit plus sympa que je vais faire c'est "colorer" temporairement le background du commentaire (1 ou 2 seconde), pour que l'utilisateur le repère tout de suite. Merci en tout cas ;)