ยังไงเพื่อเพิ่มช่องว่างใน Bootstrap จนกระทั่งธาตุอยู่ด้านบนสุดของจอ?

Question 1

ฉันมีภาพของเว็บไซต์ของที่อยู่ใน Bootstrap 4 และต้องการที่จะทำความภาพขึ้นถึงจุดสูงสุดของของผู้ใช้งานหน้าจอเมื่อแน่ใจหรือปุ่มภาพคือมีการคลิกโดยการเพิ่มช่องว่างไปที่ด้านล่างของเว็บไซต์ดังนั้นภาพเป็นอยู่ทางด้านบนหน้าจอตต์บนเว็บไซต์ของฉันคือ scrolled ตลอดทางลงไป(ซึ่งฉันคิดออกไปกับ JS ฟังก์ชัน). ได้ยังไงต่อการเพิ่มช่องว่างต้องเว็บไซต์ของจนกระทั่งภาพอยู่ด้านบนของจอ? ฉันมีคำตอบของมีบางอย่างธาตุใน CSS ที่สุดขอบซ่อมสูงและมีมันมองเห็นได้เมื่อมีการคลิกแต่ต้องการมันสำหรับต่างขนาดของ viewports.

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 ฉันไม่ต้องซ่อม measurement ของอวกาศแต่จนกระทั่งภาพจะมาถึงเพื่อไปสู่จุดสูงสุด

Question 2

ถ้าคุณแค่ต้องการตำแหน่งของของคุณ img ที่จะต้องอยู่ที่บนสุดของหน้าจอเมื่อคุณคลิกบน button งั้นคุณสามารถลองรหัสด้านล่างนี้:

const theImg = document.getElementById("myImg");
const theBtn = document.getElementById("myBtn");
theBtn.addEventListener("click", function(){
  theImg.style.position="fixed";
  theImg.style.top=0;
});

body{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-item: center;
  justify-content: center;
}
img{
  height: 5rem;
  width: 100%;
}

<button id="myBtn">Button</button>
<img id="myImg" src="https://www.w3schools.com/css/paris.jpg">

ถ้าคุณไม่คุ้นเคยกับตำแหน่งใน css งั้นมันคงจะดีที่สุดสำหรับคุณต้องเช็ค นี่เอกสาร.

Yong Pin · Answer 1 · 2021-11-24T01:05:47

ถ้าคุณแค่ต้องการตำแหน่งของของคุณ img ที่จะต้องอยู่ที่บนสุดของหน้าจอเมื่อคุณคลิกบน button งั้นคุณสามารถลองรหัสด้านล่างนี้:

const theImg = document.getElementById("myImg");
const theBtn = document.getElementById("myBtn");
theBtn.addEventListener("click", function(){
  theImg.style.position="fixed";
  theImg.style.top=0;
});

body{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-item: center;
  justify-content: center;
}
img{
  height: 5rem;
  width: 100%;
}

<button id="myBtn">Button</button>
<img id="myImg" src="https://www.w3schools.com/css/paris.jpg">

ถ้าคุณไม่คุ้นเคยกับตำแหน่งใน css งั้นมันคงจะดีที่สุดสำหรับคุณต้องเช็ค นี่เอกสาร.

ยังไงเพื่อเพิ่มช่องว่างใน Bootstrap จนกระทั่งธาตุอยู่ด้านบนสุดของจอ?

คำถาม

คำตอบที่ดีที่สุด

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่