У меня на веб-сайте есть это изображение, которое в начальной версии 4, и я хочу, чтобы изображение было вверху экрана моего пользователя, когда нажимается определенная кнопка или изображение, добавляя пробел в нижней части веб-сайта, поэтому изображение находится на верхнем экране, когда мой веб-сайт прокручивается полностью вниз (что я выяснил с помощью функции JS). Как можно продолжать добавлять пробелы на веб-сайт до тех пор, пока изображение не окажется в верхней части экрана? Я придумал решение, позволяющее иметь определенный элемент в CSS с фиксированными измерениями полей и видеть его при нажатии, но хочу, чтобы он был для различных размеров видовых экранов.
scrollingElement = (document.scrollingElement || document.body);
function scrollSmoothToBottom (id) {
$(scrollingElement).animate({
scrollTop: document.body.scrollHeight
}, 500);
}
window.onload = function(){
// Make WhiteSpace not on website
document.getElementById("whiteSpace").style.display = "none";
document.getElementById("submitButton").addEventListener("click",function(){
// Once Button is clicked make whitespace visible then scroll to bottom
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>
Пример того, каким я хочу видеть свой веб-сайт. Это мой код прямо сейчас, и я хочу, чтобы в CSS у меня не было фиксированного измерения пространства, кроме как до тех пор, пока изображение не достигнет вершины.