如何在jQuery事件执行后保持页面滚动位置？ [英] How to maintain page scroll position after a jquery event is carried out?

问题描述

我已经搜索了高和低的答案，并发现了类似的问题的例子，但答案不适用于我的情况。现实是我对此很陌生，因此我没有技能来调整我发现的问题的答案。

问题：

我有一个Div，当单击一个缩略图时，Div图像会通过JavaScript / jQuery脚本替换另一个图像（我不确定是否有人可以澄清）。这工作正常，但问题是页面滚动回顶部，然后用户必须向下滚动以查看图像后，它已经取代自己。

我有在线查看并发现返回false：在JavaScript中可能会有所帮助，但我已查看并返回false已存在。

我看过的其他选项是一个基于JavaScript cookie的解决方案，在该解决方案中发送cookie，浏览器滚动位置通过读取cookie来维护，但我似乎无法获得该解决方案的工作，我认为这个问题可能是由于我在本地托管，但我可能是错误...

第三个是使用PHP脚本，但我还没有找到这个方法的明确答案，这也意味着我将不得不学习PHP （我确信我必须及时学习）。

这里是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> 
  

这里是html：

 < div class =cakecont> 
 
< div id =cakebox> 
 
  
< div class =pageinfo2> 
< h3> Cake Type 1< / h3> 
< h6>£2.00< / h6> 
< / div> 
< div class =infobox> 
< h6>描述< / h6> 
< / div> 
 
< div class =gallerybox> 
 < img src =../ images / thumbs / babycaketopsml.pngalt =缩图2/>< / a> 
 
< a href =../ images / cakes / babycake1.pngclass =galleryicon> 
< img src =../ images / thumbs / babycakesml.pngalt =图片1/>< / a> 
< / div> 
< / div> 
< / div> 
  

这里是工作演示的链接 http://micahcarrick.com/code/jquery-image-swap/index.html

我试图自己解决这个问题。这是我迄今为止关于构建我的网站时必须要询问的第一个问题，我对过去问题的所有学习和补救都是由Google服务的，这一点避免了我的搜索引擎技能。

下面我添加了页面的所有html，以防可能有其他脚本覆盖new修改过的JavaScript -

 <！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd > 
< html xmlns =http://www.w3.org/1999/xhtml>< head> 
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/> 
< title>纸杯蛋糕&在伯恩茅斯多塞特郡的生日蛋糕/结婚礼物 -  SweetVision< / title> 
  < meta name =robotscontent =ALL/> 
< meta http-equiv =Content-Languagecontent =en/> 
< meta name =Publishercontent =Sweet Vision/> 
   
< link href =../ images / homepage / favicon.icotype =image / vnd.microsoft.icon =shortcut icon/> 
 
< link href =../ root / css / sweetvision.css =stylesheettype =text / css/> 
 
< script src =../ js / jquery-1.4.2.min.jstype =text / javascript>< / script> 
 
< script type =text / javascript> 
 $ b $（document）.ready（function（）{
 $（'。galleryicon'）。live（click，function（e）{//（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（）; 
}）; 
 e.preventDefault（）; //防止导致
返回false的默认点击操作; //页面回滚到顶部
}）; 
}）; 
 
 
< / script> 
 
< script src =../ js / s3Slider.jstype =text / javascript>< / script> 
 
< script type =text / javascript> 
 
 $（document）.ready（function（）{
 $（'＃s3slider'）。s3Slider（{
 timeOut：4000 
}）; 
}）; 
< / script> 
 
< script src =../ js / SpryMenuBar.jstype =text / javascript>< / script> 
< link href =../ root / css / SpryMenuBarHorizo​​ntal.css =stylesheettype =text / css/> 
 
< / head> 
 
 
< body> 
 
 
 
< div class =container> 
 
 
< div class =sprybox> 
< ul id =check_menuclass =MenuBarHorizo​​ntal> 
< li>< a href =../ root / index.html>主页< / a>< / li> 
< li>< a href =../ root / aboutus.htmlclass =MenuBarItemSubmenu>关于我们< / a> 
< ul> 
< li>< a href =../ root / contactus.html>联络人< / a>< / li> 
< li>< a href =../ root / news.html>新闻< / a>< / li> 
< li>< a href =../ root / events.html>活动< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =../ root / ourmenu.html>我们的菜单< / a>< / li> 
< li>< a href =gallery.html>图库< / 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  - ><！ -  sprybox结束 - > 
 
 <！ -  end div元素 - > 
 
 
 <！ - 缩略图是指向全尺寸图片的链接 - > 
 
< div class =cakecont> 
 
< div id =cakebox> 
 
  
< div class =pageinfo2> 
< h3> Cake Type 1< / h3> 
< h6>£2.00< / h6> 
< / div> 
< div class =infobox> 
< h6>描述< / h6> 
< / div> 
 
< div class =gallerybox> 
 < img src =../ images / thumbs / babycaketopsml.pngalt =缩图2/>< / a> 
 
< a href =../ images / cakes / babycake1.pngclass =galleryicon> 
< img src =../ images / thumbs / babycakesml.pngalt =图片1/>< / a> 
< / div> 
< / div> 
< / div> 
 
 
 
< div class =footer> 
< p>版权与复制; 2012由马克Webb。保留所有权利。< / p> 
< / div> <！ -  end .footer  - > 
 
< / div> <！ -  end .container  - > 
 
 
< script type =text / javascript> 
 var MenuBar1 =新的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> 
  

解决方案

您可以保存当前滚动量并设置它稍后：

  var tempScrollTop = $（window）.scrollTop（）; 
 
 .. //你的代码
 
 $（window）.scrollTop（tempScrollTop）; 
  

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:

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

Here is the 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>

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 -

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

解决方案

You can save the current scroll amount and then set it later:

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

..//Your code

$(window).scrollTop(tempScrollTop);

这篇关于如何在jQuery事件执行后保持页面滚动位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！