gpt4 book ai didi

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

转载 作者:IT王子 更新时间:2023-10-29 03:09:03 27 4
gpt4 key购买 nike

我到处搜索答案并找到了类似的问题示例,但答案不适用于我的情况。事实上,我是新手,因此我不具备将找到的答案应用到我的问题中的技能。

问题:

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

我在网上查看并发现 return 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">

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

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

我试图自己解决这个问题。到目前为止,这是我不得不问的第一个关于我的网站 build 的问题,我所有的学习和对过去问题的补救措施都是由谷歌提供的,这个问题已经逃避了我的搜索引擎技能。

下面我添加了页面的所有 html,以防其他脚本覆盖"new"修改后的 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>

最佳答案

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

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

..//Your code

$(window).scrollTop(tempScrollTop);

关于javascript - 如何在执行 jquery 事件后保持页面滚动位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10836428/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com