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 & 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 © 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);
