Utilisation scroll.js sur un site OnePage

**tarentaise** · 27/03/2016, 17h06

J'ai un site "One page" avec un scroll vertical. Mon souci est que le scroll s'applique seulement aux boutons de ma barre de menu et que je n'arrive pas à faire fonctionner sur le refresh d'un formulaire qui abouti sur une ancre (id="#formulaire_contact").

Le code de ma barre menu est :

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
<nav class="main-nav-outer" id="test"><!--main-nav-start-->
    <div class="container">
        <ul class="main-nav">
            <li><a href="#header">Home</a></li>
            <li><a href="#service">Services</a></li>
            <li><a href="#Portfolio">Portfolio</a></li>
            <li class="small-logo"><a href="#header"><img src="img/small-logo.png" alt=""></a></li>
            <li><a href="#client">Références</a></li>
            <li><a href="#team">Equipe</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
        <a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
    </div>
</nav>

Le javascript est :

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
<script type="text/javascript">
    $(window).load(function(){
 
        $('.main-nav li a').bind('click',function(event){
            var $anchor = $(this);
 
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top - 102
            }, 1500,'easeInOutExpo');
            /*
            if you don't want to use the easing effects:
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top
            }, 1000);
            */
            event.preventDefault();
        });
    })
</script>

Le code de mon formulaire est :

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
<div class="formulaire_contact">
    <form method="post" action="/MonPage.html#formulaire_contact" enctype="multipart/form-data" class="scroll-to">
        <fieldset>
            <span>
                <li style="display:none;"><input name="destinataire[]" value="1" type="hidden"></li>
                <span class="editer editer_nom saisie_nom  obligatoire">
                    <label for="info_nom">Nom   *</label>
                    <input class="text input-text" name="nom" id="info_nom" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" type="text">
                </span>
                <span class="editer editer_mail saisie_mail obligatoire">
                    <label for="mail">Votre courriel *</label>
                    <input class="text input-text" name="mail" id="mail" value="contact@creations.lcvd.fr" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" type="text">
                </span>
                <span class="editer editer_sujet saisie_sujet  obligatoire">
                    <label for="info_sujet">Sujet   *</label>
                    <input class="text input-text" name="sujet" id="info_sujet" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" type="text">
                </span>
                <span class="editer editer_texte saisie_texte obligatoire">
                    <label for="contact_texte">Votre message *</label>
                    <textarea name="texte" id="contact_texte" cols="0" rows="0" class="no_barre input-text text-area" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"></textarea>
                </span>
            </span>
        </fieldset>
        <p style="display:none;">
            <label for="contact_nobot">Veuillez laisser ce champ vide&nbsp;:</label>
            <input class="text" name="nobot" id="contact_nobot" value="" size="10" type="text">
        </p>
        <p class="boutons"><input class="submit input-btn" name="valide" value="Envoyer un message" type="submit"></p>
    </form>
</div>

J'ai cherché sur le web et j'ai trouvé un code, j'ai remplacé dans le javascript la ligne :

Code :

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

$('.main-nav li a').bind('click',function(event)

par :

Code :

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

$('.main-nav li a, form.scroll-to').bind('click',function(event)

puis par :

Code :

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

$('.main-nav li a, input.scroll-to').bind('click',function(event)

en ajoutant class="scroll-to" à la balise <form> puis aux balises <input> de type "submit

Mais rien ne fonctionne ....

Si quelqu’un à une solution je suis preneur .... d'avance merci à vous

**01001111** · 27/03/2016, 21h12

si je comprends bien tu cherches à scroller de manière animée dans un site one page vers les contenus concernés.

voici une méthode que je te propose (attention le css ici est fait pour les tests):

à noter: j'utilise l'attribut name sur une ancre de hauteur 0 pour cibler, elle même positionnée au bon endroit.
Le test ne marche que pour "contact", le tout étant de reproduire le principe à chaque endroit de la page où commence une nouvelle section.
A noter qu'avec cette méthode même si javascript est désactivé, ça marche sans animation, car c'est la bonne vieille méthode (ancre avec href qui pointe sur ancre avec name)

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!Doctype HTML>
<html>
<head>
        <meta charset="utf-8"/>
        <style type="text/css">
                html {
                        font-family:Arial;
                }
                nav {
                        display:block;
                        height:40px;
                        line-height:40px;
                }
                nav ul {
                        display:block;
                        padding:0;
                        margin:0;
                }
                nav ul li {
                        display:inline-block;
                        padding:0;
                        margin:0;
                        list-style-type:none;
                }
                nav ul li a {
                        text-decoration:none;
                        color:#000;
                }
                fieldset>span {
                        display:block;
                }
                fieldset>span>span {
                        display:block;
                }
                fieldset>span>span label {
                        display:block;
                        width:200px;
                        height:30px;
                        line-height:30px;
                }
                fieldset>span>span input[type=text] {
                        display:block;
                        width:200px;
                        height:30px;
                        line-height:30px;
                        border:1px solid black;
                }
                textarea {
                        resize:none;
                        display:block;
                        width:200px;
                        height:400px;
                        line-height:30px;
                        border:1px solid black;
                }
        </style>
</head>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<nav class="main-nav-outer" id="test"><!--main-nav-start-->
    <div class="container">
        <ul class="main-nav">
            <li><a href="#header">Home</a></li>
            <li><a href="#service">Services</a></li>
            <li><a href="#Portfolio">Portfolio</a></li>
            <li class="small-logo"><a href="#header"></a></li>
            <li><a href="#client">Références</a></li>
            <li><a href="#team">Equipe</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
        <a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
    </div>
</nav>
<div class="formulaire_contact">
    <form method="post" action="/MonPage.html#formulaire_contact" enctype="multipart/form-data" class="scroll-to">
        <a name="contact" style="display:block; height:0px;"></a>
        <fieldset>
            <span>
                <li style="display:none;"><input name="destinataire[]" value="1" type="hidden"></li>
                <span class="editer editer_nom saisie_nom  obligatoire">
                    <label for="info_nom">Nom   *</label>
                    <input class="text input-text" name="nom" id="info_nom" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" type="text">
                </span>
                <span class="editer editer_mail saisie_mail obligatoire">
                    <label for="mail">Votre courriel *</label>
                    <input class="text input-text" name="mail" id="mail" value="contact@creations.lcvd.fr" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" type="text">
                </span>
                <span class="editer editer_sujet saisie_sujet  obligatoire">
                    <label for="info_sujet">Sujet   *</label>
                    <input class="text input-text" name="sujet" id="info_sujet" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" type="text">
                </span>
                <span class="editer editer_texte saisie_texte obligatoire">
                    <label for="contact_texte">Votre message *</label>
                    <textarea name="texte" id="contact_texte" cols="0" rows="0" class="no_barre input-text text-area" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"></textarea>
                </span>
            </span>
        </fieldset>
        <p style="display:none;">
            <label for="contact_nobot">Veuillez laisser ce champ vide&nbsp;:</label>
            <input class="text" name="nobot" id="contact_nobot" value="" size="10" type="text">
        </p>
        <p class="boutons"><input class="submit input-btn" name="valide" value="Envoyer un message" type="submit"></p>
    </form>
</div>
<script type="text/javascript">
        $(window).load(function(){
                $('.main-nav li a').bind('click',function(event){
                        event.preventDefault();
                        var $anchor = $(this)[0].href.substr($(this)[0].href.indexOf("#")+1);
                        if ($("a[name="+$anchor+"]").length>0) {
                            $('html, body').stop().animate({
                                scrollTop: $("a[name="+$anchor+"]").offset().top
                            }, 500);
                        }
            /*
            if you don't want to use the easing effects:
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top
            }, 1000);
            */
                });
        })
</script>

**tarentaise** · 27/03/2016, 23h55

Merci pour la réponse.
Sur mon site one-page le scroll fonctionne très bien à partir de mon menu.
J'ai peut être mal exprimé mon souci qui est lié à mon formulaire.

Lorsque je clique sur le bouton "Envoyez" j'ai une recharge par ajax qui fait apparaitre le contenu du formulaire rempli par l'internaute pour qu'il le valide avant de l'envoyez.
C'est pour cela que dans ma balise <form> l'action se fait sur ma page vers une ancre qui se nomme #formulaire_contact. Le problème vient qu'après rechargement ma page ne se cale pas au bon endroit, sur l'ancre, mais un peu plus haut ce qui rend l'affichage disgracieux.

Dans mon code javascript seuls les liens dans des li contenus dans un élément ayant la classe "main-nav" fonctionne correctement.

Je cherche donc à faire en sorte que le lien contenu dans l'attribut "action" de ma balise <form> permette à ma page de s'afficher correctement par rapport à l'ancre désignée dans celui-ci.

**01001111** · 28/03/2016, 10h41

un clic sur le input type=button ne déclenche pas le script avec preventDefault car ce script ne s'applique qu'aux ancres.
en rajoutant "form.scroll-to" dans le sélecteur tu ajoutes le mauvais sélecteur:
il faut ajouter plutôt ce sélecteur: input[type=submit]
Mais le preventDefault peut te poser un problème pour la soumission du formulaire, à voir après.
Soit tu fais par la suite une soumission du formulaire en ajax, soit tu fais autrement.

Fais attention un affichage direct de données depuis un formulaire sur un site pour vérification t'expose aux failles XSS.

**tarentaise** · 28/03/2016, 19h17

Bonjour,

de retour chez moi j'ai essayé de mettre le sélecteur: input[type=submit] dans mon script :

Code :

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

$('.main-nav li a, input[type=submit]').bind('click',function(event)

mais cela ne fonctionne pas mieux

Le traitement du formulaire ce fait effectivement par ajax

**01001111** · 28/03/2016, 19h32

Eh bien si tu soumets le formulaire via ajax, il n'y a aucune raison pour mettre un action sur le formulaire, ainsi qu'un bouton submit.
Dans ce cas, enlève le action, et transforme le input type="submit" en input type="button", la page ne défilera plus quand l'utilisateur soumet son formulaire.

Le script que tu utilises se base sur href en croyant que l'élément sélectionné est une ancre. Il n'y pas d'attribut href sur un input type="button" ou un input type="submit".
Les href, quand il contiennent un # pointent naturellement sur l'élément dont le name est identique à la partie du href après le #.

Utilisation scroll.js sur un site OnePage

jQuery

Vue hybride

Discussions similaires

Partager

Partager