Javascript 执行jquery事件后如何保持页面滚动位置?
我到处寻找答案,也找到了类似问题的例子,但答案并不适用于我的情景。事实上,我对这一点还不熟悉,因此我没有能力根据我的问题找到答案 问题是: 我有一个Div,当单击缩略图时,Div图像将通过JavaScript/jQuery脚本替换为另一个图像(我不确定是否有人可以澄清)。这可以很好地工作,但是问题是页面会卷回顶部,用户必须在图像替换后向下滚动才能看到图像 我在网上查看了一下,发现返回false:在JavaScript中可能会有所帮助,但是我查看了一下,返回false已经存在 另一个选项是基于JavaScript cookie的解决方案,其中发送cookie,并通过读取cookie来保持浏览器的滚动位置,但是我似乎无法使该解决方案工作,我认为问题可能是因为我在本地托管,但我可能错了 第三个是使用PHP脚本,但我还没有找到关于这个方法的明确答案,这也意味着我必须学习PHP(我相信无论如何我都必须及时学习) 下面是JavaScript:Javascript 执行jquery事件后如何保持页面滚动位置?,javascript,jquery,html,Javascript,Jquery,Html,我到处寻找答案,也找到了类似问题的例子,但答案并不适用于我的情景。事实上,我对这一点还不熟悉,因此我没有能力根据我的问题找到答案 问题是: 我有一个Div,当单击缩略图时,Div图像将通过JavaScript/jQuery脚本替换为另一个图像(我不确定是否有人可以澄清)。这可以很好地工作,但是问题是页面会卷回顶部,用户必须在图像替换后向下滚动才能看到图像 我在网上查看了一下,发现返回false:在JavaScript中可能会有所帮助,但是我查看了一下,返回false已经存在 另一个选项是基于Ja
<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>
$(文档).ready(函数(){
$('.galleryicon').live(“单击”,函数(){
$('#main image').hide();
$('#cakebox').css('background-image','url('ajax-loader.gif'));
变量i=$('
以下是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>
蛋糕类型1
£2.00
描述
这里是一个链接到工作演示
我已经试着自己解决这个问题。这是我到目前为止就我的网站建设提出的第一个问题,我所有的学习和解决过去问题的方法都是由谷歌提供的,这是我搜索引擎技能无法解决的问题
下面我添加了页面的所有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="../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 © 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>
伯恩茅斯-多塞特-SweetVision的生日/结婚礼物纸杯蛋糕和蛋糕
$(文档).ready(函数(){
$('.galleryicon').live(“单击”),函数(e){//(e)表示事件
$('#main image').hide();
$('#cakebox').css('background-image','url('ajax-loader.gif'));
变量i=$('
$(文档).ready(函数(){
$('#s3slider').s3slider({
超时:4000
});
});
-
蛋糕类型1
£2.00
描述
Mark Webb版权所有©;2012。保留所有权利
var MenuBar1=new Spry.Widget.MenuBar(“检查菜单”{imgDown:“SpryAssets/sprymenubardownhave.gif”,imgRight:“SpryAssets/sprymenubarrightwaver.gif”});
var _gaq=_gaq | |[];
_gaq.push([''设置帐户','UA-29457683-1']);
_gaq.push([''u trackPageview']);
(功能(){
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);
})();
您要做的是阻止单击事件的默认操作。为此,您需要如下修改脚本:
$(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();
});
});
$(文档).ready(函数(){
$('.galleryicon').live(“单击”,函数(e){
$('#main image').hide();
$('#cakebox').css('background-image','url('ajax-loader.gif'));
变量i=$('
因此,您要在$('.galleryicon').live(“单击”,函数(e){
中添加一个表示事件的“e”,然后添加一行e.preventDefault();
尝试下面的代码,以防止默认行为回滚到页面顶部
$(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
});
});
$(文档).ready(函数(){
$('.galleryicon').live(“单击”),函数(e){//(e)表示事件
$('#main image').hide();
$('#cakebox').css('background-image','url('ajax-loader.gif'));
变量i=$('
有关event.preventDefault()的详细信息,请查看官方文档。您可以保存当前滚动金额,然后在以后进行设置:
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>
在重新加载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')。制作动画({
scrollTop:$(“#答案-”).offset().top-50
}, 700);
当我访问页面时,我看不到任何滚动条。整个页面都显示在屏幕上。你使用的是更小的分辨率吗?是的,我在笔记本电脑上,所以我可以获得滚动效果,谢谢。非常感谢你的回答,我已经实现了代码,但它仍然跳到页面顶部,我不知道是否有其他脚本覆盖了它。我只是做了一个test页面,只要滚动条不在页面底部,您的解决方案就会正常工作
$('html,body').animate({
scrollTop: $('#answer-<%= @answer.id %>').offset().top - 50
}, 700);