Returning to the same part of page (css/jQuery)

Question

So, here is the code

jQuery('.item').click(function() {		
    jQuery('.popup').show();
    jQuery('.main').hide();	
});	

jQuery('.go_back').click(function() {		
    jQuery('.main').show();
    jQuery('.popup').hide();	
});

.box{
   border-style: solid;
   width: 100px;
   height: 100px;
   margin: 16px;
   cursor: pointer;
}
.popup_content{
   border-style: solid;
   width: 200px;
   height: 200px;
   margin: 16px;
   background-color: #3f51b5;
   color: #fff;
    padding:16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">    
    <div class="item item_1" data-id="item_1">
        <div class="box container_1 ">
            Item 1
        </div>
    </div>
    <div class="item item_2" data-id="item_2">
        <div class="box container_2">
            Item 2
        </div>
    </div>
    <div class="item item_3" data-id="item_3">
        <div class="box container_3">
            item 3
        </div>
    </div>
    <div class="item item_4" data-id="item_4">
        <div class="box container_4">
            Item 4
        </div>
    </div>
    <div class="item item_5" data-id="item_5">
        <div class="box container_5">
            Item 5
        </div>
    </div>
    <div class="item item_6" data-id="item_6">
        <div class="box container_6">
            Item 6
        </div>
    </div>
    <div class="item item_7" data-id="item_7">
        <div class="box container_7">
            Item 7
        </div>
    </div>
    <div class="item item_8" data-id="item_8">
        <div class="box container_8">
            Item 8
        </div>
    </div>
    <div class="item item_9" data-id="item_9">
        <div class="box container_9">
            Item 9
        </div>
    </div>
    <div class="item item_10" data-id="item_10">
        <div class="box container_10">
            Item 10
        </div>
    </div>
</div>
<div class="popup" style="display:none;">
    <div class="popup_content">
        Popup content
    </div>
    <button type="button" class="go_back">Go back</button>
</div>

Here is the setup.

There are 10 containers in the main div. When one of them is clicked, the main div is hidden and "popup" is shown (see the js).

Now, imagine a scenario in which you click "Item 10" box which is located at the bottom of the page. Then the "popup" div will be shown. If you click "Go back" button then you will see the main content again, but now you are at the top of the page, not at "Item 10".

I know why it is scrolled to the top of page (because the popup content is shorter in height than the main div). Because the popup div will never be taller than the main div, is there a way to "Go back" to the same section of the main div?

For example, if you click "Item 10", and you see the popup content, then you click "Go back", I want to show "Item 10" instead of "Item 1" (Hope, I am making sense).

Schahriar SaffarShargh · Accepted Answer · 2015-11-13 23:24:15Z

2

A JavaScript way of doing this is using a new variable to cache the position of scroll:

https://jsfiddle.net/csj7k4m1/1/

var PositionCache = 0;

jQuery('.item').click(function() {
    PositionCache = jQuery('body').scrollTop();
    jQuery('.popup').show();
    jQuery('.main').hide(); 
}); 

jQuery('.go_back').click(function() {
    jQuery('.main').show();
    jQuery('.popup').hide();    
    jQuery('body').scrollTop(PositionCache);
});

That way you won't have to make modifications to your layout.

Edit:

This has an arguable advantage over position: fixed; as users often scroll the page when the content is on display thus defeating the purpose of returning positions.

Edit 2:

As @Jeremy Swinarton mentioned it is easy to prevent scroll by adding another css property overflow:hidden; to the body but the argument still stands as the content behind the modal needs to be rendered. In some cases this is ideal (popup doesn't cover the entire page) but in some cases such as when dealing with low-powered devices and using MVC models it would be ideal (depending on your structure) to render one View at a time thus separating content to provide better performance.

edited Nov 13, 2015 at 23:24

answered Nov 13, 2015 at 23:06

Schahriar SaffarShargh

1,9712 gold badges16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jeremy Swinarton Over a year ago

There are better ways to go about fixing scroll behaviour when modals are open—the best would be to apply overflow: hidden on the body when the modal is open. Tracking scroll position using scrollTop seems like overkill here.

Schahriar SaffarShargh Over a year ago

@JeremySwinarton, I personally use that exact technique (overflow:hidden) in most of my projects that's why I used the arguable. Although I found out that using MVC View such as Backbone, it is preferable to store the scrollTop position when the content behind the popup/modal (the View in MVC) doesn't need to be rendered by the browser.

Juan · Accepted Answer · 2015-11-13 23:08:59Z

1

https://jsfiddle.net/h62hk07v/

Instead of hiding the main div and showing popup in its place, you can use CSS fixed positioning to allow the popup to cover up the main div. Then when you hide it, the user's scroll position is preserved. (This is how Bootstrap's modals work.)

css

.popup {
    position:fixed;
    width:100%;
    height:100%;
    background-color:white;
    top:0;
    left:0;
    z-index:30;
}

jquery

jQuery('.item').click(function() {      
    jQuery('.popup').show();
}); 

jQuery('.go_back').click(function() {       
    jQuery('.popup').hide();    
});

edited Nov 13, 2015 at 23:08

Juan

5,0883 gold badges41 silver badges49 bronze badges

answered Nov 13, 2015 at 23:05

Jeremy Swinarton

5371 gold badge5 silver badges14 bronze badges

1 Comment

Steve Kim Over a year ago

Ah, that makes sense. =) Thank you. Simple solution. Learned something new. =)

Collectives™ on Stack Overflow

Returning to the same part of page (css/jQuery)

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related