Site multi-pages + navigation sur ancre décalée

Version imprimable

Bonjour,
Je débute en javascript !
En préambule : je suis en train de travailler sur un site avec une base bootstrap V3.3.6 et jquery V 1.11.2.
J'utilise un script "smooth scroll" qui fonctionne très bien lors des déplacements vers les ancres de ma page "index.php" via ma navbar.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function() {
        $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: (target.offset().top - 8)//top navigation height
                    }, 500);
                    return false;
                }
            }
        });
    });

Quand je suis sur une autre page ( ex: "page2.php") et que je reviens vers mon "index.php", j'ai un décalage.
Je me retrouve décalé vers le haut..et plus je pointe une ancre en bas de ma page index.php, plus le décalage est important.
Ci-dessous le code de ma navbar

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<nav id="template-navbar" class="navbar navbar-default custom-navbar-default navbar-fixed-top">
           <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Food-fair-toggle">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        <img id="logo" src="../images/Logo_main.png" alt="Logo Julie Traiteur" class="logo img-responsive resizeImage">
                    </a>
                </div>
 
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="Food-fair-toggle" aria-expanded="false">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="../index.php#header-slider" title="Accueil">Accueil</a></li>
                        <li><a href="../index.php#about" title="A propos">A propos</a></li>
                        <li><a href="../index.php#voyage" title="Les voyages de Julie">Les voyages de Julie</a></li>
                        <li><a href="../index.php#charcuterie" title="Charcuterie & Rotisserie">Charcuterie &amp; Rotisserie</a></li>
                        <li><a href="../index.php#animation" title="Animations">Animations</a></li>
                        <li><a href="../index.php#contact" title="Contact">Contact</a></li>
                        <li><a href="../index.php#plan" title="Adresse & Plan">Adresse &amp; Plan</a></li>
                        <li><a href="<?php echo $urlEspacePro ?>" style="color:#fb2034" title="Espace Pro">Espace Pro</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.row -->
        </nav>

côté section - ex ancre vers la section animation:

Code:

<section id="animation" class="animation" name="animation">

et j'ai rajouté ça il y a peu juste au dessus de ma balise <section> :

Code:

<a href="#animation"></a>

J'ai testé plusieurs scripts et celui là ne fonctionne que sous firefox:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var jump=function(e)
{
    if (e){
        e.preventDefault();
        var target = $(this).attr("href");
    }else{
        var target = location.hash;
    }
 
    $('html,body').animate(
        {
            scrollTop: $(target).offset().top -8
        },500,function()
        {
            location.hash = target;
        });
 
}
 
$('html, body').hide();
 
$(document).ready(function()
                  {
    $('a[href^=#]').bind("click", jump);
 
    if (location.hash){
        setTimeout(function(){
            $('html, body').scrollTop(0).show();
            jump();
        }, 0);
    }else{
        $('html, body').show();
    }
});

J'ai parcouru plusieurs forum dont celui-ci...là je sèche !
Auriez-vous un script qui gère les ancres sur du multipages et compatible tous navigateurs ??
Merci d'avance.
Jack

22/04/2016, 00h35
Toufik83
Bonsoir,
d'après ce que je sais moi c'est que la librairie jQuery ne fonctionne correctement que lorsque le Html est propre, c'est à dire ne pas faire un code html comme
Code:

1 2 <img id="logo" src="" alt="" class="" >
il faut fermer l'élément <img />
Code:

1 2 <img id="logo" src="" alt="" class="" />
22/04/2016, 12h14
JackMiles

Bonjour Toufik83,
Merci pour ce retour, je vais de ce pas vérifier toutes mes balises <img>, c'est un oubli effectivement.
Je vais tester de ce pas.
Bonne journée.
Jack

Re,

Bon je n'avais que cette balise <img> non fermée...et ça ne marche pas pour autant.
Ce que je peux comprendre avec mon peu de formation c'est que ma fonction smoothscroll est exécutée lorsque je clique sur mon lien mais qu'elle ne rentre jamais dans sa 2ième boucle (le " if (target.length) {
$('html,body').animate...." ) à l'arrivée sur la page visée, la fonction redémarre à 0...alors que le script s'exécute bien sur un one page.

Je ne sais pas si c'est clair, :roll: lol !
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: (target.offset().top - 8)//top navigation height }, 500); return false; } } }); });
L'idée de la fonction "jump" que j'ai mis sur mon 1er message est pas mal mais elle ne fonctionne que sous firefox !!
J'ai parcouru plusieurs forums et je n'ai tjrs pas trouvé...

22/04/2016, 17h29
Toufik83

a tu essayé if (target.length>0) ?
23/04/2016, 12h34
JackMiles

Bonjour Toufik83,
Je n'ai eu qu'une semaine de cours sur javascript avec juste 1 jour de jquery...je suis très très light!! je vais tester ce que tu proposes..
Merci encore ;)

Bonjour,
J'ai trouvé un petit script qui fonctionne pas mal et qui résout mon pb.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
var jump=function(e)
        {
            if (e){
                e.preventDefault();
                var target = $(this).attr("href");
            }else{
                var target = location.hash;
            }
 
            $('html,body').animate(
                {
                    scrollTop: $(target).offset().top -8
                },500,function()
                {
                    location.hash = target;
                });
 
        }
 
        $('html, body').hide();
 
        $(document).ready(function()
                          {
            $('a[href^=#]').bind("click", jump);
 
            if (location.hash){
                setTimeout(function(){
                    $('html, body').scrollTop(0).show("slow");
                    jump();
                }, 0);
            }else{
                $('html, body').show();
            }
        });

Je clos donc le sujet.
Bonne journée ;)