CSS/JS reset scroll position of a DIV inside an absolute DIV

user_282772 0
Viewed 2322

I'm loading an image inside a div #popup, which is inside a main wrapper called #main

#mask {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.84);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    overflow-y: auto;
    overflow-x: hidden;
}

and

#popup {
    display: block;
    position: absolute;
    top: 30px;
    max-width: 960px;
    z-index: 9999;
    background-color: #efefef; 
    height: auto;
    left: 80px;
    right: 80px;
    margin: 0 auto;
    margin-bottom: 80px;
}

with jQuery i load an image inside #popup and i can scroll it up and down, but when i close the overlay and I load another image, the image is not visible form the top...it maintains the same scroll position when i left/close the first image...

dunno why...how can I reset it without resetting the whole page?

$('#popup').scrollTop(0);

seem is not working...

css html jquery javascript
1 Answers

You are trying to reset the scrolling of the wrong div, you should reset the scroll of the div that has the overflow property set.

In this case the div that handle the scroll is the #mask div, so apply the scrollTop() the #mask element.

$('#mask').scrollTop(0); will do the work.

Make sure the element (#mask) is already visible when calling the scrollTop() will not work.

user_35160080
Related