Jak utrzymać pozycję przewijania strony po wykonaniu zdarzenia jquery?

Szukałem odpowiedzi na pytania wysokie i niskie i znalazłem podobne przykłady problemu, ale odpowiedzi nie dotyczą mojego scenariusza. Rzeczywistość jest taka, że ​​jestem nowy i dlatego nie mam umiejętności, aby dostosować odpowiedzi, które znalazłem, do mojego problemu.

Problem:

Mam Div, w którym po kliknięciu miniatury obraz Div zastępuje innym obrazem za pomocą skryptu JavaScript / jQuery (nie jestem pewien, czy ktoś może to wyjaśnić). Działa to dobrze, jednak problem polega na tym, że strona przewija się z powrotem do góry, a następnie użytkownik musi przewinąć w dół, aby zobaczyć obraz po jego zastąpieniu.

Sprawdziłem online i stwierdziłem, że return false: w JavaScript może pomóc, mimo że wyglądałem, a zwracanie false jest już obecne.

Inną opcją, na którą patrzyłem, jest rozwiązanie oparte na plikach cookie JavaScript, w którym wysyłane jest ciasteczko, a pozycja przewijania przeglądarki jest utrzymywana przez czytanie pliku cookie, jednak nie wydaje mi się, aby to rozwiązanie działało, myślę, że problem może być spowodowany ponieważ prowadzę lokalnie, ale mogę się mylić ...

Trzeci to użycie skryptu PHP, ale nie znalazłem definitywnej odpowiedzi na tę metodę, a to oznacza również, że będę musiał uczyć się o PHP (coś, co i tak będę musiał się nauczyć na czas).

Oto 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>

Oto 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>

A oto link do działającej wersji demonstracyjnejhttp://micahcarrick.com/code/jquery-image-swap/index.html

Próbowałem rozwiązać ten problem sam. To pierwsze pytanie, które musiałem zadać do tej pory w związku z budową mojej strony internetowej. Google nauczyło mnie wszystkich moich nauk i środków zaradczych w związku z wcześniejszymi problemami.

Poniżej dodałem cały html do strony na wypadek, gdyby istniał inny skrypt zastępujący „nowy” zmodyfikowany JavaScript -

 <!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>

questionAnswers(7)

yourAnswerToTheQuestion