web-dev-qa-db-fra.com

Comment conserver la position de défilement de la page après la réalisation d'un événement jquery?

J'ai cherché haut et bas une réponse et j'ai trouvé des exemples similaires du problème mais les réponses ne s'appliquent pas à mon scénario. La réalité est que je suis novice dans ce domaine et que je n’ai donc pas les compétences nécessaires pour adapter les réponses que j’ai trouvées à mon problème.

Le problème:

J'ai une Div dans laquelle, lorsque l'on clique sur une vignette, l'image Div est remplacée par une autre image via un script JavaScript/jQuery (je ne suis pas sûr que quelqu'un pourrait peut-être préciser). Cela fonctionne bien, mais le problème est que la page fait défiler vers le haut et que l'utilisateur doit alors faire défiler vers le bas pour voir l'image après qu'elle se soit remplacée.

J'ai regardé en ligne et ai constaté qu'un retour faux: dans le JavaScript peut aider mais j'ai regardé et le retour faux est déjà présent.

L’autre option que j’ai envisagée d’utiliser est une solution basée sur un cookie JavaScript, dans laquelle un cookie est envoyé, et la position de défilement du navigateur est maintenue en lisant le cookie. Cependant, je ne peux pas obtenir cette solution au travail. parce que je suis héberger localement mais je peux me tromper ...

La troisième utilise un script PHP mais je n'ai pas trouvé de réponse définitive sur cette méthode et cela signifie également que je vais devoir en apprendre plus sur PHP (quelque chose que je suis sûr de devoir apprendre dans le temps quand même).

Voici le JavaScript:

<script type="text/javascript">

 $(document).ready(function() {
  $('.galleryicon').live("click", function() {

    $('#mainImage').hide();
    $('#cakebox').css('background-image', "url('ajax-loader.gif')");
    var i = $('<img />').attr('src',this.href).load(function() {
        $('#mainImage').attr('src', i.attr('src'));
        $('#cakebox').css('background-image', 'none');
        $('#mainImage').fadeIn();
    });
    return false; 
   });
 });

</script>

Voici le code HTML:

<div class="cakecont">

  <div id="cakebox">

 <img src="../images/cakes/babycake1.png" alt="Main Image" id="mainImage"/>

     <div class="pageinfo2">
     <h3>Cake Type 1</h3>
     <h6>£2.00</h6>
     </div>
     <div class="infobox">
     <h6> Description </h6>
     </div> 

      <div class="gallerybox">
      <a href="../images/cakes/babycaketop.png" class="galleryicon">
      <img src="../images/thumbs/babycaketopsml.png" alt="Thumbnail 2"/></a>

      <a href="../images/cakes/babycake1.png" class="galleryicon">
      <img src="../images/thumbs/babycakesml.png" alt="Image 1"/></a>
   </div>
  </div>
</div>

Et voici un lien vers la démo de travail http://micahcarrick.com/code/jquery-image-swap/index.html

J'ai essayé de résoudre ce problème moi-même. C’est la première question que j’ai eu à poser jusqu’à présent concernant la construction de mon site Web. Tout mon apprentissage et les solutions apportées aux problèmes passés ont été servis par Google; celui-ci a échappé à mes compétences en tant que moteur de recherche.

Ci-dessous, j'ai ajouté tout le code HTML de la page au cas où un autre script remplacerait le "nouveau" JavaScript modifié - 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org     /TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"><head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Cupcakes &amp; Cakes for Birthday/Wedding Gift in Bournemouth Dorset - SweetVision</title>
   <meta name="keywords" content="cupcakes, cake, gift, wedding, birthday, Bournemouth, Dorset" />
 <meta name="description" content="For the finest Cupcakes and Cakes in Bournemouth Dorset look no further, Sweetvision specialise in baked goods for Weddings, Birthdays, Baby Showers, Easter, Halloween, Christmas" />
 <meta name="robots" content="ALL" />
 <meta http-equiv= "Content-Language" content="en" />
 <meta name="Publisher" content="Sweet Vision" />
 <meta name="Copyright" content="Copyright 2012, Sweet Vision, All rights reserved." />
 <meta name="Author" content="Mark Webb for Sweet Vision - www.sweetvision.co.uk" />

  <link href="../images/homepage/favicon.ico" type="image/vnd.Microsoft.icon" rel="shortcut icon" />

  <link href="../root/css/sweetvision.css" rel="stylesheet" type="text/css" />

  <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>

  <script type="text/javascript">

 $(document).ready(function() {   
$('.galleryicon').live("click", function(e) {  // the (e) represent the event
$('#mainImage').hide();     
$('#cakebox').css('background-image', "url('ajax-loader.gif')");     
var i = $('<img />').attr('src',this.href).load(function() {         
  $('#mainImage').attr('src', i.attr('src'));         
  $('#cakebox').css('background-image', 'none');         
  $('#mainImage').fadeIn();     
 });
 e.preventDefault(); //Prevent default click action which is causing the 
 return false;       //page to scroll back to the top
 });  
});


</script>

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

 <script type="text/javascript">

 $(document).ready(function() {
 $('#s3slider').s3Slider({
  timeOut: 4000
  });
}); 
  </script>

  <script src="../js/SpryMenuBar.js" type="text/javascript"></script>
  <link href="../root/css/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

  </head> 


 <body>



  <div class="container">


 <div class="sprybox">
   <ul id="check_menu" class="MenuBarHorizontal">
    <li><a href="../root/index.html">Home</a></li>
    <li><a href="../root/aboutus.html" class="MenuBarItemSubmenu">About Us</a>
      <ul>
        <li><a href="../root/contactus.html">Contact</a></li>
        <li><a href="../root/news.html">News</a></li>
        <li><a href="../root/events.html">Events</a></li>
      </ul>
    </li>
       <li><a href="../root/ourmenu.html">Our Menu</a></li>
         <li><a href="gallery.html">Gallery</a></li>
          </ul>
        <div class="mainmenu">
           <a href="../root/mainmenu.html">
           <img src="../images/buttons/mainmenu.png" />
           </a>
       </div>
        <div class="backbutton">
        <a href="javascript:history.go(-1)"> 
        <img src="../images/buttons/Backbutton.png" /></a>
      </div>

    </div>  <!-- end.header --><!--end of sprybox -->

  <!--end div element -->


 <!-- thumbnails are links to the full size image -->

  <div class="cakecont">

 <div id="cakebox">

  <img src="../images/cakes/babycake1.png" alt="Main Image" id="mainImage"/>

     <div class="pageinfo2">
     <h3>Cake Type 1</h3>
     <h6>£2.00</h6>
     </div>
     <div class="infobox">
     <h6> Description </h6>
     </div> 

 <div class="gallerybox">
      <a href="../images/cakes/babycaketop.png" class="galleryicon">
      <img src="../images/thumbs/babycaketopsml.png" alt="Thumbnail 2"/></a>

      <a href="../images/cakes/babycake1.png" class="galleryicon">
      <img src="../images/thumbs/babycakesml.png" alt="Image 1"/></a>
  </div>
  </div>
</div>



 <div class="footer">
  <p>Copyright &copy; 2012 by Mark Webb. All rights reserved.</p>
 </div> <!-- end .footer -->

</div> <!-- end .container -->


 <script type="text/javascript">
 var MenuBar1 = new Spry.Widget.MenuBar("check_menu",{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",   imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
  </script>

 <script type="text/javascript">

  var _gaq = _gaq || [];
 _gaq.Push(['_setAccount', 'UA-29457683-1']);
  _gaq.Push(['_trackPageview']);

   (function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') +    '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

 </script>


 </body>
</html>
javascriptjqueryhtml
38
marky

Vous pouvez enregistrer le montant de défilement actuel et le définir ultérieurement:

var tempScrollTop = $(window).scrollTop();

..//Your code

$(window).scrollTop(tempScrollTop);
56
Briguy37

Pour tous ceux qui sont venus ici de Google et qui utilisent un élément d'ancrage pour déclencher l'événement, assurez-vous d'annuler le clic de la même manière:

<a  
href='javascript:void(0)'  
onclick='javascript:whatever causing the page to scroll to the top'  
></a>
30
Nasser Al-Wohaibi

Essayez le code ci-dessous pour empêcher le comportement par défaut de revenir au haut de la page. 

$(document).ready(function() {   
  $('.galleryicon').live("click", function(e) {  // the (e) represent the event
    $('#mainImage').hide();     
    $('#cakebox').css('background-image', "url('ajax-loader.gif')");     
    var i = $('<img />').attr('src',this.href).load(function() {         
      $('#mainImage').attr('src', i.attr('src'));         
      $('#cakebox').css('background-image', 'none');         
      $('#mainImage').fadeIn();     
    });
  e.preventDefault(); //Prevent default click action which is causing the 
  return false;       //page to scroll back to the top
  });  
});

Pour plus d'informations sur event.preventDefault (), consultez ici la documentation officielle.

5
Mark Walters

Ce que vous voulez faire, c'est empêcher l'action par défaut de l'événement click. Pour ce faire, vous devrez modifier votre script comme suit:

$(document).ready(function() {
  $('.galleryicon').live("click", function(e) {

    $('#mainImage').hide();
    $('#cakebox').css('background-image', "url('ajax-loader.gif')");
    var i = $('<img />').attr('src',this.href).load(function() {
        $('#mainImage').attr('src', i.attr('src'));
        $('#cakebox').css('background-image', 'none');
        $('#mainImage').fadeIn();
    });
    return false; 
    e.preventDefault();
   });
 });

Donc, vous ajoutez un "e" qui représente l'événement dans la ligne $('.galleryicon').live("click", function(e) { et vous ajoutez la ligne e.preventDefault();

4
redlena

J'ai eu un problème similaire à faire fonctionner scrollTop après le rechargement du contenu div. Le contenu défilait jusqu'en haut à chaque fois que la procédure ci-dessous était exécutée. J'ai trouvé qu'un peu de retard avant de configurer le nouveau scrolltop résolvait le problème. 

Ceci est coupé de wdCalendar où j'ai modifié cette procédure:

 function BuildDaysAndWeekView(startday, l, events, config)
   ....
        var scrollpos = $("#dvtec").scrollTop();
        gridcontainer.html(html.join(""));
        setTimeout(function() {
            $("#dvtec").scrollTop(scrollpos);
        }, 25);
   ....

Sans le retard, cela n'a tout simplement pas fonctionné. 

2
olekeh
$('html,body').animate({
  scrollTop: $('#answer-<%= @answer.id %>').offset().top - 50
}, 700);
0
Danh Văn Võ

Quelque chose à noter, lorsque vous définissez la position de défilement, assurez-vous de le faire dans le bon champ. Par exemple, si vous utilisez la position de défilement dans plusieurs fonctions, vous souhaiterez la définir en dehors de ces fonctions.

$(document).ready(function() {
    var tempScrollTop = $(window).scrollTop();
    function example() {
        console.log(tempScrollTop);
    };

});
0
Daniel Dewhurst