Discussion :

[JackMiles]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img id="logo" src="" alt="" class="" >

il faut fermer l'élément <img />

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img id="logo" src="" alt="" class="" />

[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

[JackMiles]

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, lol !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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é...

[Toufik83]

a tu essayé if (target.length>0) ?

[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

[JackMiles]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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