[英]Return the user to their original position on a page when they close navigation
I'm working with manipulating foundations off-canvas navigation to get it to do what I want and it's been causing quite a few issues. 我正在处理基础离场导航的基础,以使它做我想做的事情,这引起了很多问题。 One main one I've noticed is that when I stick the header to the top of the page so it scrolls with me as I go down pages, when you open it it opens at the top of the page.
我注意到的一个主要问题是,当我将标题粘贴到页面顶部时,它会随着我向下滚动页面,当您打开它时,它会在页面顶部打开。 So for that I added a .click(function) to get the page to scroll back to the top which can be found here:
所以为此,我添加了一个.click(函数)来使页面滚动回到顶部,可以在这里找到:
jQuery: 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: 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>
So my question is how do I use the variable "screenTop" to get the page to return to it's stored original position within the body of the page when the user CLOSES the "a.left-off-canvas-toggle" menu? 所以我的问题是当用户关闭“a.left-off-canvas-toggle”菜单时,如何使用变量“screenTop”让页面返回到页面正文中存储的原始位置?
Here is a working fiddle: http://jsfiddle.net/CMbBC/18/ 这是一个工作小提琴: http : //jsfiddle.net/CMbBC/18/
I think this slution is somewhat close to your answer. 我认为这种洗脱有点接近你的答案。
JQuery
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();
});
In demo first click on getInfo
then click check
在demo中首先单击
getInfo
然后单击check
DEMO DEMO
Update 1:
更新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
}
});
});
if i'm right to understand your question you want to scroll original position try this 如果我理解你的问题你想要滚动原始位置试试这个
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')
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.