Forum : Scroll to top after Ajax effect

Salut à vous voila,

J'ai suivi le tutoriel sur la navigation en Ajax, et ma navigation marche =D ! Sauf que j'ai un soucis, j'avais quelques scripts javascript qui maintenant ne marche plus j'ai réussi à corriger un bug grâce à la fonction .on().

Mais je n'arrive pas à faire fonctionner ce script:

$(function(){
  $('#up').click(function() {
    $('html,body').animate({scrollTop: 0}, 'slow');
   });
  $(window).scroll(function(){
    if($(window).scrollTop()<50){
      $('#up').fadeOut();
    }
    else{
      $('#up').fadeIn();
    }
  });
});

Bien sûr lors du premier chargement de ma page ça marche mais dés que j'utilise ma navigation en Ajax c'est mort ><, bref si quelqu'un voit un problème à ma solution ça serait gentil !

1ud0v1c

Auteur

Réponse acceptée

C'est bon j'ai trouvé une solution j'ai juste sorti ma div btn up de ma navigation en ajax, tout bête ^^. Merci d'avoir essayé de m'aider ;)

tonymx227

Avec le code HTML on comprendra mieux ;)

Sinon j'ai un doute sur :

if($(window).scrollTop() < 50){
    $('#up').fadeOut();
}

Essaye plutôt :

if($(window).scrollTop() > 50){
    $('#up').fadeOut();
}

jsFiddle : http://jsfiddle.net/F2deQ/

1ud0v1c

Auteur

Salut tony, merci de ta réponse, je suis sur de mon script il marche sur mes autres sites sans ajax ^^. VOila pour mon code html :) !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="Présentation et CV" /> 
        <title>Webmaster - Développeur</title>
        <link rel="stylesheet" media="screen" type="text/css" title="Mon style" href="design.css" />
        <link rel="shortcut icon" type="image/x-icon" href="img/favicon.png" />
                <script type="text/javascript" src="js/jquery.js"></script>
                <script type="text/javascript" src="js/scroll.js"></script>
                <script type="text/javascript" src="js/formulaire.js"></script>
                <script type="text/javascript" src="js/nav.js"></script>
    </head>
<body>
<div id="global">

<div id="header">
<div id="menu">
  <h1 id="titre">ludo61</h1>
        <ul>
            <li><a href="?p=index">Accueil</a></li>
            <li><a href="?p=cv">Mon CV</a></li>
            <li><a href="?p=crea">Mes réalisations</a></li>
            <li><a href="?p=contact">Contact</a></li>
        </ul>
</div>
</div>

<div id="contenu">
<?php 
  $p = strtolower($_GET'p']);
  if(isset($p) && preg_match("/^[a-z0-9]+$/i",$p)) {
    if(file_exists("pages/$p.html")) {
      include "pages/$p.html";
    }
    else {
        include "pages/404.html";
    }
  }
  else {
    include "pages/index.html";
  }
?>
<!-- ma div ancre qui est non visible grâce à un hidden en css -->
<div id="up"></div>
</div>

<div id="footer">
    <p id="left">Me Contacter : <br />
  </p>
  <p id="right">Me Suivre : <br /><br />
                 <a href="#" ><img src="img/fb.png" alt="facebook" /></a>
                 <a href="#"><img src="img/gmail.png" alt="gmail" /></a>
  </p>
  <p id="left"><a href="#"><img src="img/xhtml.png" alt="valid xhtml" /></a>
                 <a href="#"><img src="img/css.png" alt="valid css" /></a>
  </p>
</div>
</div>
</body>
</html>

Voila si ça peut vous aider ;) !
Merci d'avoir pris le temps de me relire !

terra prime

Bonjour,

Regarde ce site ==> http://www.creativejuiz.fr/blog/tutoriels/jquery-effet-smooth-scroll-defilement-fluide

Scroll to top after Ajax effect

4 réponses