jquery事件执行后如何保持页面滚动位置?

我已经search了高和低的答案,并已find类似的问题的例子,但答案不适用于我的情况。 现实是我是新来的,因此我没有能力使我find的答案适应我的问题。

问题:

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

我在网上看了一下,发现返回false:但是JavaScript中可以帮助我查看并返回false已经存在。

我看过的另一个选项是基于JavaScript cookie的解决scheme,在该解决scheme中发送cookie,浏览器滚动位置通过读取Cookie来维护,但是我似乎无法得到该解决scheme的工作,我认为这个问题可能会导致因为我在本地托pipe,但我可能是错的…

第三个是使用PHP脚本,但我还没有find这个方法的明确答案,这也意味着我将不得不学习有关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"> <img src="..http://img.dovov.comcakes/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="..http://img.dovov.comcakes/babycaketop.png" class="galleryicon"> <img src="..http://img.dovov.comthumbs/babycaketopsml.png" alt="Thumbnail 2"/></a> <a href="..http://img.dovov.comcakes/babycake1.png" class="galleryicon"> <img src="..http://img.dovov.comthumbs/babycakesml.png" alt="Image 1"/></a> </div> </div> </div> 

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

我试图自己解决这个问题。 这是我迄今为止关于网站build设所必须要提出的第一个问题,对于过去的问题,我所有的学习和解决方法都是由Google服务的,这一点已经让我的search引擎技术难以企及。

下面我已经添加了所有的页面的HTML的情况下,可能有其他脚本覆盖“新”修改的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="..http://img.dovov.comhomepage/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="..http://img.dovov.combuttons/mainmenu.png" /> </a> </div> <div class="backbutton"> <a href="javascript:history.go(-1)"> <img src="..http://img.dovov.combuttons/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="..http://img.dovov.comcakes/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="..http://img.dovov.comcakes/babycaketop.png" class="galleryicon"> <img src="..http://img.dovov.comthumbs/babycaketopsml.png" alt="Thumbnail 2"/></a> <a href="..http://img.dovov.comcakes/babycake1.png" class="galleryicon"> <img src="..http://img.dovov.comthumbs/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> 

您可以保存当前的滚动量,然后再设置:

 var tempScrollTop = $(window).scrollTop(); ..//Your code $(window).scrollTop(tempScrollTop); 

对于所有来自谷歌,并使用锚点元素来触发事件的人,请确保同样使点击无效:

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

尝试下面的代码,以防止默认行为滚动回页面的顶部

 $(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 }); }); 

有关event.preventDefault()的更多信息,请查看官方文档。

你想要做的是防止点击事件的默认行为。 要做到这一点,你需要像这样修改脚本:

 $(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(); }); }); 

所以,你要添加一个“e”来代表$('.galleryicon').live("click", function(e) {和你正在添加e.preventDefault();的行e.preventDefault();

我有一个类似的问题,让重新加载div内容后scrollTop工作。 每次运行以下程序时,内容都会滚动到顶部。 我发现在设置新的scrolltop之前稍微延迟就解决了这个问题。

这是从wdCalendar削减了我修改这个过程:

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

没有延迟,它根本没有工作。

需要注意的是,在设置滚动位置时,请确保在正确的范围内进行。 例如,如果您在多个函数中使用滚动位置,则需要将其设置在这些函数之外。

 $(document).ready(function() { var tempScrollTop = $(window).scrollTop(); function example() { console.log(tempScrollTop); }; }); 
 $('html,body').animate({ scrollTop: $('#answer-<%= @answer.id %>').offset().top - 50 }, 700);