Utilisation scroll.js sur un site OnePage
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:
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:
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:
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 :</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:
$('.main-nav li a').bind('click',function(event)
par :
Code:
$('.main-nav li a, form.scroll-to').bind('click',function(event)
puis par :
Code:
$('.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
