简体   繁体   中英

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:

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>&nbsp;
        </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?

Here is a working fiddle: http://jsfiddle.net/CMbBC/18/

I think this slution is somewhat close to your answer.

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

Update 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
        }
    });    
});

DEMO

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')
    });

});

DEMO

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM