How to maintain page scroll position after a jquery event is carried out

Question

I have searched high and low for an answer and have found similar examples of the problem but the answers do not apply to my scenario  The reality is I am new to this and therefore I don t have the skills to adapt the answers I have found to my problem   The problem   I have a Div in which when a thumbnail is clicked the Div image replaces with another image via a JavaScript jQuery script  I am not sure exactly maybe someone could clarify   This works fine however the problem is the page scrolls back to the top and the user then has to scroll back down to see the image after it has replaced itself   I have looked online and have found that a return false  in the JavaScript may help however I have looked and return false is already present   The other option I have looked at using is a JavaScript cookie based solution in which a cookie is sent  and the browser scroll position is maintain by reading the cookie however I cant seem to get that solution to work  I think the issue may be caused because I am hosting locally but I may be wrong     The third is using a PHP script but I have not found a definitive answer on this method and it also means I am going to have to learn about PHP  something I m sure I will have to learn in time anyway    Here is the JavaScript    lt script type  text javascript  gt      document  ready function           galleryicon   live  click   function              mainImage   hide            cakebox   css  background-image    url  ajax-loader gif          var i       lt img   gt    attr  src  this href  load function                 mainImage   attr  src   i attr  src                 cakebox   css  background-image    none                mainImage   fadeIn                return false                 lt  script gt    Here is the html    lt div class  cakecont  gt      lt div id  cakebox  gt     lt img src     images cakes babycake1 png  alt  Main Image  id  mainImage   gt         lt div class  pageinfo2  gt        lt h3 gt Cake Type 1 lt  h3 gt        lt h6 gt   2 00 lt  h6 gt        lt  div gt        lt div class  infobox  gt        lt h6 gt  Description  lt  h6 gt        lt  div gt           lt div class  gallerybox  gt         lt a href     images cakes babycaketop png  class  galleryicon  gt         lt img src     images thumbs babycaketopsml png  alt  Thumbnail 2   gt  lt  a gt          lt a href     images cakes babycake1 png  class  galleryicon  gt         lt img src     images thumbs babycakesml png  alt  Image 1   gt  lt  a gt      lt  div gt     lt  div gt   lt  div gt    And here is a link to the working demo http   micahcarrick com code jquery-image-swap index html  I have tried to resolve this on my own  This is the first question I have had to ask so far regarding the building of my website  all my learning and remedies to past problems have been served by Google  this one has eluded my search engine skills   Below I have added all the html for the page in case there may be other script overriding the  new  modified JavaScript -     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org      TR xhtml1 DTD xhtml1-transitional dtd  gt    lt html xmlns  http   www w3 org 1999 xhtml  gt  lt head gt    lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt     lt title gt Cupcakes  amp amp  Cakes for Birthday Wedding Gift in Bournemouth Dorset - SweetVision lt  title gt      lt meta name  keywords  content  cupcakes  cake  gift  wedding  birthday  Bournemouth  Dorset    gt    lt 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    gt    lt meta name  robots  content  ALL    gt    lt meta http-equiv   Content-Language  content  en    gt    lt meta name  Publisher  content  Sweet Vision    gt    lt meta name  Copyright  content  Copyright 2012  Sweet Vision  All rights reserved     gt    lt meta name  Author  content  Mark Webb for Sweet Vision - www sweetvision co uk    gt      lt link href     images homepage favicon ico  type  image vnd microsoft icon  rel  shortcut icon    gt      lt link href     root css sweetvision css  rel  stylesheet  type  text css    gt      lt script src     js jquery-1 4 2 min js  type  text javascript  gt  lt  script gt      lt script type  text javascript  gt      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       lt img   gt    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               lt  script gt    lt script src     js s3Slider js  type  text javascript  gt  lt  script gt      lt script type  text javascript  gt      document  ready function          s3slider   s3Slider     timeOut  4000               lt  script gt      lt script src     js SpryMenuBar js  type  text javascript  gt  lt  script gt     lt link href     root css SpryMenuBarHorizontal css  rel  stylesheet  type  text css    gt      lt  head gt       lt body gt        lt div class  container  gt      lt div class  sprybox  gt      lt ul id  check menu  class  MenuBarHorizontal  gt       lt li gt  lt a href     root index html  gt Home lt  a gt  lt  li gt       lt li gt  lt a href     root aboutus html  class  MenuBarItemSubmenu  gt About Us lt  a gt         lt ul gt           lt li gt  lt a href     root contactus html  gt Contact lt  a gt  lt  li gt           lt li gt  lt a href     root news html  gt News lt  a gt  lt  li gt           lt li gt  lt a href     root events html  gt Events lt  a gt  lt  li gt         lt  ul gt       lt  li gt          lt li gt  lt a href     root ourmenu html  gt Our Menu lt  a gt  lt  li gt            lt li gt  lt a href  gallery html  gt Gallery lt  a gt  lt  li gt             lt  ul gt           lt div class  mainmenu  gt              lt a href     root mainmenu html  gt              lt img src     images buttons mainmenu png    gt              lt  a gt          lt  div gt           lt div class  backbutton  gt           lt a href  javascript history go -1   gt            lt img src     images buttons Backbutton png    gt  lt  a gt         lt  div gt        lt  div gt    lt  -- end header -- gt  lt  --end of sprybox -- gt      lt  --end div element -- gt      lt  -- thumbnails are links to the full size image -- gt      lt div class  cakecont  gt     lt div id  cakebox  gt      lt img src     images cakes babycake1 png  alt  Main Image  id  mainImage   gt         lt div class  pageinfo2  gt        lt h3 gt Cake Type 1 lt  h3 gt        lt h6 gt   2 00 lt  h6 gt        lt  div gt        lt div class  infobox  gt        lt h6 gt  Description  lt  h6 gt        lt  div gt      lt div class  gallerybox  gt         lt a href     images cakes babycaketop png  class  galleryicon  gt         lt img src     images thumbs babycaketopsml png  alt  Thumbnail 2   gt  lt  a gt          lt a href     images cakes babycake1 png  class  galleryicon  gt         lt img src     images thumbs babycakesml png  alt  Image 1   gt  lt  a gt     lt  div gt     lt  div gt   lt  div gt       lt div class  footer  gt     lt p gt Copyright  amp copy  2012 by Mark Webb  All rights reserved  lt  p gt    lt  div gt   lt  -- end  footer -- gt    lt  div gt   lt  -- end  container -- gt      lt script type  text javascript  gt   var MenuBar1   new Spry Widget MenuBar  check menu   imgDown  SpryAssets SpryMenuBarDownHover gif     imgRight  SpryAssets SpryMenuBarRightHover gif        lt  script gt     lt script type  text javascript  gt     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              lt  script gt      lt  body gt   lt  html gt

User · Answer

Try the code below to prevent the default behaviour scrolling back to the top of the 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
  });  
});

For more information on event.preventDefault() have a look here at the official documentation.

User · Answer

What you want to do is prevent the default action of the click event   To do this  you will need to modify your script like this     document  ready function           galleryicon   live  click   function e             mainImage   hide            cakebox   css  background-image    url  ajax-loader gif          var i       lt img   gt    attr  src  this href  load function                 mainImage   attr  src   i attr  src                 cakebox   css  background-image    none                mainImage   fadeIn                return false       e preventDefault                  So  you re adding an  e  that represents the event in the line     galleryicon   live  click   function e     and you re adding the line e preventDefault

User · Answer

I had a similar problem getting scrollTop to work after reload of div content  The content scrolled to top each time the procedure below was run  I found that a little delay before setting the new scrolltop solved the issue    This is cut from wdCalendar where I modified this procedure    function BuildDaysAndWeekView startday  l  events  config                  var scrollpos       dvtec   scrollTop            gridcontainer html html join               setTimeout function                     dvtec   scrollTop scrollpos              25             Without the delay  it simply did not work

User · Answer

You can save the current scroll amount and then set it later   var tempScrollTop     window  scrollTop         Your code    window  scrollTop tempScrollTop

User · Answer

html body   animate     scrollTop      answer- lt     answer id   gt    offset   top - 50    700

User · Answer

For all who came here from google and are using an anchor  element for firing the event  please make sure to void the click likewise    lt a   href  javascript void 0     onclick  javascript whatever causing the page to scroll to the top     gt  lt  a gt

User · Answer

Something to note  when setting the scroll position  make sure you do it in the correct scope  For example  if you re using the scroll position in multiple functions  you would want to set it outside of these functions     document  ready function         var tempScrollTop     window  scrollTop        function example             console log tempScrollTop

[javascript] How to maintain page scroll position after a jquery event is carried out?

Examples related to javascript

Examples related to jquery

Examples related to html