Sam Granger Sam Granger - 2 months ago 8
CSS Question

jQuery scroll AFTER CSS Change

I built some modal windows that appear using CSS. However, they're showing up at the top of the page, rather than the top of the window. I would make things fixed, but sometimes the modal window is long and needs to be absolute so you can scroll through and read longer info in the modal box.

To remedy this I'd like to:


  • either write some jQuery to scroll up to the top of the page,

  • or find
    a way to make the modal appear at the top of the window (rather than
    the page).



Here's a JSFiddle for you to see what I'm working with:
https://jsfiddle.net/4f4qa1w5/4/

And the code if you'd like to see it here:



$(".modal-container").css("display") == "block", function() {
$("html, body").animate({ scrollTop: 0 }, 300);
return false;
};

.modal-container {
position: absolute;
max-width: 500px;
background: #fff;
padding: 20px;
border-radius: 5px;
left: 50%;
transform: translate(-50%);
display: none;
}
.modal-container img {
width: 100%;
}
.modal:before {
content: "";
position: fixed;
display: none;
background-color: rgba(0,0,0,.8);
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.modal:target:before {
display: block;
}
.modal:target .modal-container {
top: 125px;
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<a href="#listen">
<h2>Click to Listen</h2>
</a>
<div class="modal" id="listen">
<div class="modal-container album-modal">
<div class="close"><a class="red-it" href="#">X</a></div>
<br>
</div>






Answer

Here is the trick to solve your problem.

Jquery

$(function(){
    $("#trigger").click(function(){
    $(".modal").css("display","block");
    $(".modal").css("overflow-y","auto");
    $("body").css("overflow","hidden");
    $(".modal-container").css("display","block");
    $("html, body").animate({ scrollTop: 0 }, "slow");//
    return false;//
  })
})


$(function(){
    $(".close").click(function(e){
    e.preventDefault();
    $(".modal").css("display","none");
    $(".modal").css("overflow-y","");
    $("body").css("overflow","");
    window.location.hash = $("#trigger").attr("id");
  })
})

DEMO

Comments