当用户关闭导航时,将用户恢复到原来的位置
问题描述:
我正在操作基础之外的导航工具,以便让它按照我的要求进行操作,并且导致了很多问题。我注意到的一个主要问题是,当我将页眉粘贴到页面的顶部时,当页面向下滚动时,滚动页面,当您打开它时,它会在页面顶部打开。所以,我加入了。点击(函数)来获取页面回滚动到顶部可以在这里找到:当用户关闭导航时,将用户恢复到原来的位置
的jQuery:
jQuery('section.left-small a.menu-icon').click(function() {
var screenTop = jQuery(document).scrollTop();
jQuery('#content').css('top', screenTop);
//console.log(screenTop);
jQuery('body').scrollTop(0);
});
HTML:
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title uppercase"><a href="/">Island Company</a></h1>
<a href="/checkout/suitcase.html">
<img src="/media/island/suitcase.png" />
<span class="suitcase-item-count">(<?= $quote->getItemCount(); ?>)</span>
</a>
</section>
</nav>
所以我的问题是,当用户关闭“a.left-off-canvas-toggle”菜单时,如何使用变量“screenTop”使页面返回到页面主体中存储的原始位置?
这里是工作提琴:http://jsfiddle.net/CMbBC/18/
答
我觉得这slution有点接近你的答案。
JQuery的
$("#check").click(function() {
if ($("#menu").is(":hidden")) {
$(document).scrollTop(lastPos);
} else {
// do that
}
});
var lastPos=0;
$("#getInfo").click(function(){
$("#menu").toggle();
lastPos=$(document).scrollTop();
});
在演示先点击getInfo
然后单击check
DEMO
更新1:
$(document).scroll(function() {
//store current scroll pos
//lastPos=$(document).scrollTop();
});
var lastPos=0;
$("#getInfo").click(function(){
//store scroll pos befor toggle
lastPos=$(document).scrollTop();
$("#menu").toggle("slow", function() {
// Animation complete.
if ($("#menu").is(":hidden")) {
$(document).scrollTop(lastPos);
} else {
// do that
}
});
});
答
如果我正确理解你的问题,你要滚动原来的位置试试这个
jQuery(document).ready(function() {
var screenTop=jQuery(document).scrollTop();
//sending page to the top when menu opens up
jQuery('.left-small a.menu-icon').click(function() {
//need to be able to send page back to original position before clicking on menu button
//jQuery('#content').css('top', screenTop);
console.log(screenTop);
temp = jQuery(document).scrollTop();
jQuery('body').scrollTop(screenTop);
screenTop = temp;
//when top menu closes, return page to previous location
//previous location is stored in var screenTop
//jQuery('body').animate(screenTop);
//if ('a.menu-icon')
});
});
+0
这是我想要的方式,除了翻转。当我关闭菜单时,我希望页面返回到打开菜单时的位置。现在,当我向下滚动并打开导航时,它会回到顶部。然后当我关闭它时,它保持在顶部。但是当我再次打开并关闭它时,它会返回到我第一次打开导航时的位置 – rklitz 2014-09-12 15:26:04
它是很好的贴在小提琴 – 2014-09-12 14:46:10
代码您是否尝试过获得“div”(或任何其他容器)偏移顶部,将该数据存储到一个变量并使用它滚动? – 2014-09-12 14:53:52
男人程序员,我添加了一个小提琴。 Maurizio,我不完全确定你的意思是什么 – rklitz 2014-09-12 14:55:59