I want to enhance my website design in Bootstrap 4 by having an image appear at the top of the user's screen when a certain button or image is clicked. This can be achieved by adding white space to the bottom of the website so that the image remains visible at the top even when scrolling all the way down. I have already figured out the JavaScript function for scrolling, but how can I dynamically add whitespace to the website until the image is positioned at the top of the screen? My current solution involves setting fixed margins for a specific element in CSS and making it visible upon clicking, but I need this to work for various viewport sizes.
scrollingElement = (document.scrollingElement || document.body);
function scrollSmoothToBottom(id) {
$(scrollingElement).animate({
scrollTop: document.body.scrollHeight
}, 500);
}
window.onload = function(){
// Hide whitespace initially
document.getElementById("whiteSpace").style.display = "none";
document.getElementById("submitButton").addEventListener("click", function() {
// Make whitespace visible and scroll to bottom on button click
document.getElementById("whiteSpace").style.display = "block";
scrollSmoothToBottom();
});
}.space{
margin:520px;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<center>
<h1 id = "collegeNameTitle">Name</h1>
<h3>Student Size</h3>
<span class="badge badge-success even-larger-badge" id = "collegeStudentSizeText">10</span>
<h3>Acceptance Rate:</h3>
<span class="badge badge-success even-larger-badge" id = "collegeAcceptanceRateText">10</span>
<h3>Student-Faculty Ratio:</h3><span class="badge badge-success even-larger-badge" id = "collegeRatioText">10</span>
</center>
<center><button id = "submitButton"><img class = "collegeImage"src="sample.png" id = "collegeImage"></button></center>
<div id = "whiteSpace" class ="space" visibility = "hidden">
</div>Currently, my website code has fixed measurements for spacing in CSS, but I would like to have a dynamic approach where there are no fixed measurements and the whitespace adjusts until the image reaches the top.