Discussion :

[tarentaise]

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