Ho questa immagine sul mio sito che in Bootstrap 4 e vogliono avere l'immagine sulla parte superiore del mio schermo dell'utente quando il pulsante di determinati o l'immagine viene cliccato da aggiungere spazio bianco di fondo del sito web, quindi l'immagine è in alto dello schermo quando il mio sito web è necessario scorrere tutta la strada fino, (che ho capito con funzione JS). Come si può continuare ad aggiungere gli spazi per sito web fino a quando l'immagine nella parte superiore dello schermo? Sono venuto con una soluzione di avere un certo elemento in CSS con i margini misurazioni in siti fissi e sono visibili quando cliccato, ma vuole essere di varie dimensioni delle finestre.
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>
Esempio di come voglio che il mio sito web. Questo è il mio codice di adesso e vuole nel CSS ho fissato la misura dello spazio, ma fino a quando l'immagine raggiunge la cima.