Forum : Scrolling site "One page"

Salut,

Je viens de finir l'intégration et le codage html, css et javascript de mon site "One page" et je rencontre quelques problèmes!

j'ai suivi le tuto de Creatiq pour faire la partie javascript de mon site "One page" ! (il commence à traiter le js à partir de 1h15)

Quand je clique sur mon menu j'arrive à la section voulu mais il n'y a pas d'effet de scrolling et mon menu reste actif sur l'accueil ...

je vais vous donner mon javascript et html. Merci d'avance pour votre aide :-)

$(document).ready(function(){

    $("#nav li a").click(function(){
        $("#nav li a").removeClass("active");
        $(this).addClass("active");
        var id=$(this).attr("href");
        scrollTo(id);
        return false;
    });

    function scrollTo(target){
        if($(target).length>=1){
        height=$(target).offset().top;
        }

        $("html,body").animate({scrollTop: height}, 1200);
        return false;
    };
});

<!DOCTYPE html>
<html lang="fr">
<head>
 <meta http-equiv="content-type" content="text/html" charset="iso-8859-1" />
 <title>Cover Perf</title> 
 <link rel="stylesheet" href="design.css" type="text/css" charset="utf-8"/> 
 <link href="zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />

 <script type="text/javascript" src="js/nav.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="zoombox/zoombox.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    $('a.zoombox').zoombox({
        autoplay:true,
        theme:'prettyphoto' 
    });
    });
    </script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</head>
<body>
<div id="contener">
<div> 
  <ul id="nav">
      <li><a href="#home" class="active">Accueil</li></a>
        <li><a href="#coverperf">Cover Perf</li></a>
        <li><a href="#apropos">A propos</li></a>
        <li><a href="#contact">Contact</li></a>  
    </ul>
</div> 
<div id="home"> 
  <div><img src="images/logo_coverperf.png" alt="logo" width="650" height="536" align="middle"> </div>
</div>
<div id="separateur1">
</div>
<div id="coverperf">Cover Perf
</div>
<div id="contenu_cpleft">
blabla......
</div>
<div id="contenu_cpright">
blabla.......
</div>
<div class="clear"></div>
<div id="separateur2"></div>
<div id="apropos">
A propos
</div>
<div id="contenu_apropos">
blabla.....
</div>
<table class="bio" align="center">
blabla.....
</table>
<div id="separateur3"></div>
<div id="contact">
Contact
</div>
<div id="formulaire">
blabla.....
</div>

<div class="clear"></div>
<div id="footer">
  <p class="footer">© Copyright 2007-2011 Cover Perf</br>
  </br>
  </p>
</div>
</div>
</body>
</html>

2 réponses

Chritchan

J'ai développé ce petit site qui est basé exclusivement sur le ScrollTo : http://www.barathym.be/

$(".scroll").click(function(event){
        //Annule l'action au click (équivalent au "return false")
        event.preventDefault();

        //Reprend l'url complet de ta page
        var full_url = this.href;

        //ca va aller rechercher ton ancre 
        var parts = full_url.split("#");
        var trgt = parts[1];

        //Va rechercher la position de l'ancre de destination
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top;

        //Fait l'animation avec un joli "animate"
        $('html, body').animate({scrollTop:target_top}, 1000);
    });

Dans mon exemple, j'ai attribué une class à mes liens comme ceci :

<ul>
        <li><a href="#traditionnels" id="traditionnels_btn" class="scroll">sandwiches traditionnels</a></li>
        <li><a href="#dagoberts" class="scroll">dagoberts</a></li>
        <li><a href="#speciaux" class="scroll">sandwiches spéciaux</a></li>
        <li><a href="#salades" class="scroll">salades</a></li>
        <li><a href="#panini" class="scroll">panini</a></li>
        <li><a href="#boissons" class="scroll">boissons</a></li>
        <li><a href="#autres" class="scroll">autres</a></li>
        <li><a href="#meeting" class="scroll">meeting</a></li>
    </ul>

J'espère que cela pourra t'aider. N'hésites pas à aller fouiller dans les sources du site (même si elle n'est pas vraiment valide W3C lol)
OUH LA HONTE! :p

Col1

Auteur

Merci Chritchan, cela m'a permis d'avancer :)

Je n'ai pas réussi à appliquer ta technique (manque d'expérimentation encore) mais ton conseil qui étais d'aller farfouiller dans les sources de ton site m'a poussé directement dans les sources de la démonstration du tuto !!!

J'ai pu me rendre compte qu'il ne reliait pas le script effectué dans le tuto a son site !!Il utilise directement un script sur son html !!

<script type="text/javascript">
    var _0x6722="\x61\x63\x74\x69\x76\x65","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x23\x6E\x61\x76\x20\x6C\x69\x20\x61","\x61\x64\x64\x43\x6C\x61\x73\x73","\x68\x72\x65\x66","\x61\x74\x74\x72","\x63\x6C\x69\x63\x6B","\x6C\x65\x6E\x67\x74\x68","\x74\x6F\x70","\x6F\x66\x66\x73\x65\x74","\x61\x6E\x69\x6D\x61\x74\x65","\x68\x74\x6D\x6C\x2C\x62\x6F\x64\x79","\x72\x65\x61\x64\x79"];$(document)[_0x6722[12]](function (){$(_0x6722[2])[_0x6722[6]](function (){$(_0x6722[2])[_0x6722[1]](_0x6722[0]);$(this)[_0x6722[3]](_0x6722[0]);var _0x4ebcx1=$(this)[_0x6722[5]](_0x6722[4]);_0x4ebcx2(_0x4ebcx1);return false;} );function _0x4ebcx2(_0x4ebcx3){if($(_0x4ebcx3)[_0x6722[7]]>=1){height=$(_0x4ebcx3)[_0x6722[9]]()[_0x6722[8]];} ;$(_0x6722[11])[_0x6722[10]]({scrollTop:height},1400);return false;} ;} );
</script>

J'ai copier collé, détaché mon javascript de ma page html et ça MARCHE !!

Encore merci pour ton précieux conseil, une semaine que je butais dessus :)