當我點擊圖片時如何讓我的網站滾動到頂部

Question

我不想擁有我的網站，這樣當您單擊圖像時，它會自動將您滾動回頁面頂部。 我嘗試了一些我在網上看到的版本，但它們對我不起作用。 如果你們能試一試，我將不勝感激。 如果您有任何問題，請告訴我。 謝謝

 var click = 0; function checkClicks(imgs) { if (click == 0) { // Run your animation on first click document.getElementById('column1').classList.add('animate1') document.getElementById('column2').classList.add('animate2') document.getElementById('column3').classList.add('animate3') document.getElementById('column4').classList.add('animate4') document.getElementById('column5').classList.add('animate5') document.getElementById('column6').classList.add('animate6') document.getElementById('column7').classList.add('animate7') document.getElementById('column8').classList.add('animate8') document.getElementById('column9').classList.add('animate9') document.getElementById('footer').classList.add('animate10') document.getElementById('clickimage').classList.add('none') document.getElementById('abtproj').classList.add('animate11'); // hold Images for 1s setTimeout(function() { myFunction(imgs); }, 2050); } else { myFunction(imgs); } click = 1; } function myFunction(imgs) { var expandImg = document.getElementById("expandedImg"); expandImg.src = imgs.src; var imgParagraph = document.getElementById('img-paragraph'); imgParagraph.innerHTML = imgs.getAttribute("head"); expandImg.parentElement.style.display = "table-cell"; imgParagraph.style.display = 'table-cell'; } let target = document.querySelector('.column img'); target.addEventListener('mouseenter', () => document.querySelector('.column p').style.opacity = '0');

 * { margin: 0px; padding: 0px; border: 0px; }.topnav { background-color: rgb(84, 104, 217); overflow: hidden; font-family: 'futuralight'; font-weight: 900; }.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 20px 21px; text-decoration: none; font-size: 19px; position: relative; left: 2%; }.topnav a:before { content: ""; position: absolute; width: 84%; height: 2px; bottom: 6px; left: 8%; background-color: white; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; }.topnav a:hover:before { visibility: visible; transform: scaleX(1); }.topnav a.active-menu:before { content: ""; position: absolute; width: 84%; height: 2px; bottom: 6px; left: 8%; background-color: white; visibility: visible; transform: scaleX(1); transition: all 0.3s ease-in-out 0s; }.bigproj { text-align: center; font-size: 80px; }.proj { padding-top: 42px; font-family: 'playfair_displayregular'; font-weight: 900; } #clickimage { top: 220px; font-size: 40px; position: absolute; width: 100%; text-align: center; font-weight: 900; font-family: 'futuralight'; }.none { visibility: hidden; } #abtproj { top: 300px; font-size: 20px; position: absolute; left: 10%; width: 80%; }.animate11 { -webkit-animation: animate11 2s normal ease-out; animation: animate11 2s forwards normal ease-out; } @-webkit-keyframes animate11 { 100% { top: 240px; font-size: 20px; position: absolute; left: 10%; width: 80%; } } @keyframes animate11 { 100% { top: 240px; font-size: 20px; position: absolute; left: 10%; width: 80%; } }.column { float: left; width: 25%; position: relative; background-color: #EEF0FC; }.column p { position: absolute; color: #fff; display: flex; align-items: center; justify-content: center; top: 0; opacity: 0; transition: all.6s ease-out; margin: 0; left: 0; right: 0; bottom: 0; font-size: 31px; background: rgba(0, 0, 0, 0.5); pointer-events: none; }.column:hover p { opacity: 1; top: -7px; transition: all.6s ease-in-out; height: 100%; }.column img { cursor: pointer; background-color: black; position: relative; top: 0; vertical-align: bottom; transition: all.1s ease-out; }.column:hover img { box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); position: relative; top: -7px; transition: all.6s ease-in-out; } #totalbody { background-color: #EEF0FC; height: 600px; } /* Clear floats after the columns */.row:after { content: ""; display: table; clear: both; } /* The expanding image container */ #expandedImg { position: absolute; height: 400px; left: 300px; border-radius: 10px; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); top: 585px; transform: translate(-50%, -50%); max-height: 430px; } /* Expanding image text */ /* image paragraph */ #img-paragraph { display: none; vertical-align: top; text-align: left; position: absolute; height: 400px; width: 50%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 7px; float: right; right: 30px; top: 385px; } #expanded-wrapper { width: 100%; } /* Closable button inside the expanded image */.row { position: absolute; top: 80px; }.head1 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head2 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head3 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head4 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head5 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head6 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head7 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head8 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head9 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head1::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.head2::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.head3::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.head4::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.head5::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.head6::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.head7::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.head8::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.head9::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.para1 { width: 90%; position: relative; left: 6%; font-size: 17px; top: 60px; font-family: 'futuralight'; } #column1 { position: absolute; width: 250px; float: left; left: 135px; top: 680px; }.animate1 { -webkit-animation: animate1 2s normal ease-out; animation: animate1 2s forwards normal ease-out; } @-webkit-keyframes animate1 { 0% { position: absolute; width: 250px; float: left; left: 135px; top: 680px; } 100% { position: absolute; width: 250px; float: left; left: 135px; top: 780px; } } @keyframes animate1 { 0% { position: absolute; width: 250px; float: left; left: 135px; top: 680px; } 100% { position: absolute; width: 250px; float: left; left: 135px; top: 780px; } } #column2 { position: absolute; width: 260px; float: left; left: 650px; top: 755px; }.animate2 { -webkit-animation: animate2 2s normal ease-out; animation: animate2 2s forwards normal ease-out; } @-webkit-keyframes animate2 { 0% { position: absolute; width: 260px; float: left; left: 650px; top: 755px; } 100% { position: absolute; width: 260px; float: left; left: 130px; top: 1475px; } } @keyframes animate2 { 0% { position: absolute; width: 260px; float: left; left: 650px; top: 755px; } 100% { position: absolute; width: 260px; float: left; left: 130px; top: 1475px; } } #column3 { position: absolute; width: 220px; float: left; left: 410px; top: 725px; }.animate3 { -webkit-animation: animate3 2s normal ease-out; animation: animate3 2s forwards normal ease-out; } @-webkit-keyframes animate3 { 0% { position: absolute; width: 220px; float: left; left: 410px; top: 725px; } 100% { position: absolute; width: 220px; float: left; left: 930px; top: 1475px; } } @keyframes animate3 { 0% { position: absolute; width: 220px; float: left; left: 410px; top: 725px; } 100% { position: absolute; width: 220px; float: left; left: 930px; top: 1475px; } } #column4 { position: absolute; width: 300px; float: left; left: 300px; top: 1055px; }.animate4 { -webkit-animation: animate4 2s normal ease-out; animation: animate4 2s forwards normal ease-out; } @-webkit-keyframes animate4 { 0% { position: absolute; width: 300px; float: left; left: 300px; top: 1055px; } 100% { position: absolute; width: 350px; float: left; left: 870px; top: 1135px; } } @keyframes animate4 { 0% { position: absolute; width: 300px; float: left; left: 300px; top: 1055px; } 100% { position: absolute; width: 350px; float: left; left: 870px; top: 1135px; } } #column5 { position: absolute; width: 350px; float: left; left: 470px; top: 425px; }.animate5 { -webkit-animation: animate5 2s normal ease-out; animation: animate5 2s forwards normal ease-out; } @-webkit-keyframes animate5 { 0% { position: absolute; width: 350px; float: left; left: 470px; top: 425px; } 100% { position: absolute; width: 350px; float: left; left: 470px; top: 1135px; } } @keyframes animate5 { 0% { position: absolute; width: 350px; float: left; left: 470px; top: 425px; } 100% { position: absolute; width: 350px; float: left; left: 470px; top: 1135px; } } #column6 { position: absolute; width: 360px; float: left; left: 890px; top: 435px; }.animate6 { -webkit-animation: animate6 2s normal ease-out; animation: animate6 2s forwards normal ease-out; } @-webkit-keyframes animate6 { 0% { position: absolute; width: 360px; float: left; left: 890px; top: 435px; } 100% { position: absolute; width: 350px; float: left; left: 470px; top: 1435px; } } @keyframes animate6 { 0% { position: absolute; width: 360px; float: left; left: 890px; top: 435px; } 100% { position: absolute; width: 350px; float: left; left: 470px; top: 1435px; } } #column7 { position: absolute; width: 350px; float: left; left: 800px; top: 1025px; }.animate7 { -webkit-animation: animate7 2s normal ease-out; animation: animate7 2s forwards normal ease-out; } @-webkit-keyframes animate7 { 0% { position: absolute; width: 350px; float: left; left: 800px; top: 1025px; } 100% { position: absolute; width: 250px; float: left; left: 535px; top: 880px; } } @keyframes animate7 { 0% { position: absolute; width: 350px; float: left; left: 800px; top: 1025px; } 100% { position: absolute; width: 250px; float: left; left: 535px; top: 880px; } } #column8 { position: absolute; width: 250px; float: left; left: 135px; top: 500px; }.animate8 { -webkit-animation: animate8 2s normal ease-out; animation: animate8 2s forwards normal ease-out; } @-webkit-keyframes animate8 { 0% { position: absolute; width: 250px; float: left; left: 135px; top: 500px; } 100% { position: absolute; width: 250px; float: left; left: 935px; top: 900px; } } @keyframes animate8 { 0% { position: absolute; width: 250px; float: left; left: 135px; top: 500px; } 100% { position: absolute; width: 250px; float: left; left: 935px; top: 900px; } } #column9 { position: absolute; width: 316px; float: left; left: 933px; top: 715px; }.animate9 { -webkit-animation: animate9 2s normal ease-out; animation: animate9 2s forwards normal ease-out; } @-webkit-keyframes animate9 { 0% { position: absolute; width: 316px; float: left; left: 933px; top: 715px; } 100% { position: absolute; width: 316px; float: left; left: 100px; top: 1150px; } } @keyframes animate9 { 0% { position: absolute; width: 316px; float: left; left: 933px; top: 715px; } 100% { position: absolute; width: 316px; float: left; left: 100px; top: 1150px; } } #footer { position: absolute; background-color: rgb(84, 104, 217); height: 80px; width: 100%; top: 1500px; color: white; overflow: hidden; }.animate10 { -webkit-animation: animate10 1s normal ease-out; animation: animate10 1s forwards normal ease-out; } @-webkit-keyframes animate10 { 100% { position: absolute; top: 1900px; } } @keyframes animate10 { 100% { position: absolute; top: 1900px; } }.footwords { top: 32px; font-family: 'playfair_displayregular'; position: absolute; left: 6%; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../CSS/styleprojects.css" /> <script src='../Javascript/script.js'></script> <script src='../Javascript/fix.js'></script> <script src='../Javascript/jquery-3.5.1.min.js'></script> <:-- Global site tag (gtag.js) - Google Analytics --> <script async src="https.//www?googletagmanager.com/gtag/js.id=UA-168595753-1"></script> <script> window;dataLayer = window.dataLayer || []; function gtag() { dataLayer,push(arguments); } gtag('js', new Date()); gtag('config': 'UA-168595753-1'). </script> <title>Projects</title> <link rel="shortcut icon" type='image/png' href="https.//www.favicon.cc/logo3d/589118.png"> </head> <body id='totalbody'> <header class="topnav" id="topnav"> <a class="link" href="../index.html">Home</a> <a class="link" href="academics.html">Academics</a> <a class="active-menu" href="projects,html">Projects</a> <a class="link" href="communityservice.html">Community Service</a> </header> <div class='bigproj'> <p class='proj'> Projects </p> </div> <div id='clickimghold'> <p id='clickimage'>Click On The Images Below</p> </div> <div> <p id='abtproj'>Lorem, ipsum dolor sit amet consectetur adipisici ng elit. Dicta, libero. Recusandae provident est quam quisquam. Sequi itaque suscipit tempore corrupti officia maxime nihil consequatur perspiciatis repellat placeat sed, voluptatum vitae?lor em Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro similique. prov ident libero laudantium amet odit unde dolor eaque earum qui impedit possimus natus est distinctio commodi quod aut numquam temporibus. </p> </div> <div> <div id="expanded-wrapper"> <img id="expandedImg"> <p id="img-paragraph"></p> </div> </div> <div class="row"> <div class="column" id='column1'> <img class='arcadeimg' src=":./Images/arcade,jpeg" alt="Arcade" style="width?100%" head="<p class='head1'> Parapraph #1 </p><p class='para1'> Lorem ipsum dolor si t amet consectetur adipisicing elit; Sed natus. recusandae veritatis ipsum quia commodi tenetur laboriosam pariatur nihil incidunt architecto velit so luta placeat repellat asperiores iure eos dolorum fugiat.</p>" onclick="checkClicks(this)."> <p>Arcade Machine</p> </div> <div class="column" id='column2'> <img src=":./Images/car,png" alt="Car" style="width?100%" head="<p class='head2'> Parapraph #2 </p><p class='para1'> Lorem ipsum dolor si t amet consectetur adipisicing elit; Sed natus. recusandae veritatis ipsum quia commodi tenetur laboriosam pariatur nihil incidunt architecto velit so luta placeat repellat asperiores iure eos dolorum fugiat.</p>" onclick="checkClicks(this)."> <p>Electric Car</p> </div> <div class="column" id='column3'> <img src=":./Images/pinball,jpeg" alt="Pinball Machine" style="width?100%" head="<p class='head3'> Parapraph #3 </p><p class='para1'> Lorem ipsum dolor si t amet consectetur adipisicing elit; Sed natus. recusandae veritatis ipsum quia commodi tenetur laboriosam pariatur nihil incidunt architecto velit so luta placeat repellat asperiores iure eos dolorum fugiat.</p>" onclick="checkClicks(this)."> <p>Pinball Machine</p> </div> <div class="column" id='column4'> <img src=":./Images/vending,jpeg" alt="Vending Machine" style="width?100%" head="<p class='head4'> Parapraph #4 </p><p class='para1'> Lorem ipsum dolor si t amet consectetur adipisicing elit; Sed natus. recusandae veritatis ipsum quia commodi tenetur laboriosam pariatur nihil incidunt architecto velit so luta placeat repellat asperiores iure eos dolorum fugiat.</p>" onclick="checkClicks(this)."> <p>Vending Machine</p> </div> <div class="column" id='column5'> <img src=":./Images/sriraques,jpeg" alt="Sriracha Quesadillas" style="width?100%" head="<p class='head5'> Parapraph #5 </p><p class='para1'> Lorem ipsum dolor si t amet consectetur adipisicing elit; Sed natus: recusandae veritatis ipsum quia commodi tenetur laboriosam pariatur nihil incidunt architecto velit so luta placeat repellat asperiores iure eos dolorum fugiat.</p>" onclick="checkClicks(this)."> <p>Sriracha Quesadillas</p> </div> <div class="column" id='column6'> <img src="https://miro.medium,com/max/1000/0*kBHpKva09AsGj7RQ" alt="Lights" style="width?100%" head="<p class='head6'> web code </p><p class='para1'> Lorem ipsum dolor si t amet consectetur adipisicing elit; Sed natus: recusandae veritatis ipsum quia commodi tenetur laboriosam pariatur nihil incidunt architecto velit so luta placeat repellat asperiores iure eos dolorum fugiat.</p>" onclick="checkClicks(this)."> <p>Website Development</p> </div> <div class="column" id='column7'> <img src="https.//cdn:britannica.com/77/170477-050-1C747EE3/Laptop-computer,jpg" alt="Lights" style="width?100%" head="<p class='head7'> Web Server </p><p class='para1'> Lorem ipsum dolor si t amet consectetur adipisicing elit; Sed natus: recusandae veritatis ipsum quia commodi tenetur laboriosam pariatur nihil incidunt architecto velit so luta placeat repellat asperiores iure eos dolorum fugiat.</p>" onclick="checkClicks(this)."> <p>Web Server</p> </div> <div class="column" id='column8'> <img src="https?//nctennis.com/common/controls/image_handler:aspx.thumb_id=13&image_path=/images/2018/11/27/Wheelchair,jpg" alt="Lights" style="width?100%" head="<p class='head8'> Adaptive Tennis </p><p class='para1'> Lorem ipsum dolor si t amet consectetur adipisicing elit; Sed natus: recusandae veritatis ipsum quia commodi tenetur laboriosam pariatur nihil incidunt architecto velit so luta placeat repellat asperiores iure eos dolorum fugiat.</p>" onclick="checkClicks(this)."> <p>Adaptive Tennis</p> </div> <div class="column" id='column9'> <img src="https://opticsmag.com/wp-content/uploads/2019/04/a-telescope,jpg" alt="Lights" style="width?100%" head="<p class='head9'> telescope </p><p class='para1'> Lorem ipsum dolor si t amet consectetur adipisicing elit; Sed natus. recusandae veritatis ipsum quia commodi tenetur laboriosam pariatur nihil incidunt architecto velit so luta placeat repellat asperiores iure eos dolorum fugiat.</p>" onclick="checkClicks(this);"> <p>Telescope</p> </div> </div> </div> <footer id='footer'> <p class='footwords'> © 2020 By R. Proudly Individually Coded. </p> </footer> </body> </html>

Answer 1

您可以簡單地在每個可以觸發滾動的圖像的點擊偵聽器上添加一個window.scrollTo({top: 0, behavior: 'smooth')}處理程序。 在這個例子中，我給了觸發滾動的圖像 class scroll-triggering 。

 // Added section document.querySelectorAll('img.scroll-triggering').forEach(img => { img.addEventListener('click', e => { window.scrollTo({ top: 0, behavior: 'smooth' }) }) }) // End of added section var click = 0; function checkClicks(imgs) { if (click == 0) { // Run your animation on first click document.getElementById('column1').classList.add('animate1') document.getElementById('column2').classList.add('animate2') document.getElementById('column3').classList.add('animate3') document.getElementById('column4').classList.add('animate4') document.getElementById('column5').classList.add('animate5') document.getElementById('column6').classList.add('animate6') document.getElementById('column7').classList.add('animate7') document.getElementById('column8').classList.add('animate8') document.getElementById('column9').classList.add('animate9') document.getElementById('footer').classList.add('animate10') document.getElementById('clickimage').classList.add('none') document.getElementById('abtproj').classList.add('animate11'); // hold Images for 1s setTimeout(function() { myFunction(imgs); }, 2050); } else { myFunction(imgs); } click = 1; } function myFunction(imgs) { var expandImg = document.getElementById("expandedImg"); expandImg.src = imgs.src; var imgParagraph = document.getElementById('img-paragraph'); imgParagraph.innerHTML = imgs.getAttribute("head"); expandImg.parentElement.style.display = "table-cell"; imgParagraph.style.display = 'table-cell'; } let target = document.querySelector('.column img'); target.addEventListener('mouseenter', () => document.querySelector('.column p').style.opacity = '0');

 * { margin: 0px; padding: 0px; border: 0px; }.topnav { background-color: rgb(84, 104, 217); overflow: hidden; font-family: 'futuralight'; font-weight: 900; }.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 20px 21px; text-decoration: none; font-size: 19px; position: relative; left: 2%; }.topnav a:before { content: ""; position: absolute; width: 84%; height: 2px; bottom: 6px; left: 8%; background-color: white; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; }.topnav a:hover:before { visibility: visible; transform: scaleX(1); }.topnav a.active-menu:before { content: ""; position: absolute; width: 84%; height: 2px; bottom: 6px; left: 8%; background-color: white; visibility: visible; transform: scaleX(1); transition: all 0.3s ease-in-out 0s; }.bigproj { text-align: center; font-size: 80px; }.proj { padding-top: 42px; font-family: 'playfair_displayregular'; font-weight: 900; } #clickimage { top: 220px; font-size: 40px; position: absolute; width: 100%; text-align: center; font-weight: 900; font-family: 'futuralight'; }.none { visibility: hidden; } #abtproj { top: 300px; font-size: 20px; position: absolute; left: 10%; width: 80%; }.animate11 { -webkit-animation: animate11 2s normal ease-out; animation: animate11 2s forwards normal ease-out; } @-webkit-keyframes animate11 { 100% { top: 240px; font-size: 20px; position: absolute; left: 10%; width: 80%; } } @keyframes animate11 { 100% { top: 240px; font-size: 20px; position: absolute; left: 10%; width: 80%; } }.column { float: left; width: 25%; position: relative; background-color: #EEF0FC; }.column p { position: absolute; color: #fff; display: flex; align-items: center; justify-content: center; top: 0; opacity: 0; transition: all.6s ease-out; margin: 0; left: 0; right: 0; bottom: 0; font-size: 31px; background: rgba(0, 0, 0, 0.5); pointer-events: none; }.column:hover p { opacity: 1; top: -7px; transition: all.6s ease-in-out; height: 100%; }.column img { cursor: pointer; background-color: black; position: relative; top: 0; vertical-align: bottom; transition: all.1s ease-out; }.column:hover img { box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); position: relative; top: -7px; transition: all.6s ease-in-out; } #totalbody { background-color: #EEF0FC; height: 600px; } /* Clear floats after the columns */.row:after { content: ""; display: table; clear: both; } /* The expanding image container */ #expandedImg { position: absolute; height: 400px; left: 300px; border-radius: 10px; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); top: 585px; transform: translate(-50%, -50%); max-height: 430px; } /* Expanding image text */ /* image paragraph */ #img-paragraph { display: none; vertical-align: top; text-align: left; position: absolute; height: 400px; width: 50%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 7px; float: right; right: 30px; top: 385px; } #expanded-wrapper { width: 100%; } /* Closable button inside the expanded image */.row { position: absolute; top: 80px; }.head1 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head2 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head3 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head4 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head5 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head6 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head7 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head8 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head9 { position: relative; left: 12px; top: 16px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-left: 4%; padding-top: 30px; }.head1::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.head2::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.head3::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.head4::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.head5::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.head6::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.head7::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.head8::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.head9::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 100%; bottom: -16px; }.para1 { width: 90%; position: relative; left: 6%; font-size: 17px; top: 60px; font-family: 'futuralight'; } #column1 { position: absolute; width: 250px; float: left; left: 135px; top: 680px; }.animate1 { -webkit-animation: animate1 2s normal ease-out; animation: animate1 2s forwards normal ease-out; } @-webkit-keyframes animate1 { 0% { position: absolute; width: 250px; float: left; left: 135px; top: 680px; } 100% { position: absolute; width: 250px; float: left; left: 135px; top: 780px; } } @keyframes animate1 { 0% { position: absolute; width: 250px; float: left; left: 135px; top: 680px; } 100% { position: absolute; width: 250px; float: left; left: 135px; top: 780px; } } #column2 { position: absolute; width: 260px; float: left; left: 650px; top: 755px; }.animate2 { -webkit-animation: animate2 2s normal ease-out; animation: animate2 2s forwards normal ease-out; } @-webkit-keyframes animate2 { 0% { position: absolute; width: 260px; float: left; left: 650px; top: 755px; } 100% { position: absolute; width: 260px; float: left; left: 130px; top: 1475px; } } @keyframes animate2 { 0% { position: absolute; width: 260px; float: left; left: 650px; top: 755px; } 100% { position: absolute; width: 260px; float: left; left: 130px; top: 1475px; } } #column3 { position: absolute; width: 220px; float: left; left: 410px; top: 725px; }.animate3 { -webkit-animation: animate3 2s normal ease-out; animation: animate3 2s forwards normal ease-out; } @-webkit-keyframes animate3 { 0% { position: absolute; width: 220px; float: left; left: 410px; top: 725px; } 100% { position: absolute; width: 220px; float: left; left: 930px; top: 1475px; } } @keyframes animate3 { 0% { position: absolute; width: 220px; float: left; left: 410px; top: 725px; } 100% { position: absolute; width: 220px; float: left; left: 930px; top: 1475px; } } #column4 { position: absolute; width: 300px; float: left; left: 300px; top: 1055px; }.animate4 { -webkit-animation: animate4 2s normal ease-out; animation: animate4 2s forwards normal ease-out; } @-webkit-keyframes animate4 { 0% { position: absolute; width: 300px; float: left; left: 300px; top: 1055px; } 100% { position: absolute; width: 350px; float: left; left: 870px; top: 1135px; } } @keyframes animate4 { 0% { position: absolute; width: 300px; float: left; left: 300px; top: 1055px; } 100% { position: absolute; width: 350px; float: left; left: 870px; top: 1135px; } } #column5 { position: absolute; width: 350px; float: left; left: 470px; top: 425px; }.animate5 { -webkit-animation: animate5 2s normal ease-out; animation: animate5 2s forwards normal ease-out; } @-webkit-keyframes animate5 { 0% { position: absolute; width: 350px; float: left; left: 470px; top: 425px; } 100% { position: absolute; width: 350px; float: left; left: 470px; top: 1135px; } } @keyframes animate5 { 0% { position: absolute; width: 350px; float: left; left: 470px; top: 425px; } 100% { position: absolute; width: 350px; float: left; left: 470px; top: 1135px; } } #column6 { position: absolute; width: 360px; float: left; left: 890px; top: 435px; }.animate6 { -webkit-animation: animate6 2s normal ease-out; animation: animate6 2s forwards normal ease-out; } @-webkit-keyframes animate6 { 0% { position: absolute; width: 360px; float: left; left: 890px; top: 435px; } 100% { position: absolute; width: 350px; float: left; left: 470px; top: 1435px; } } @keyframes animate6 { 0% { position: absolute; width: 360px; float: left; left: 890px; top: 435px; } 100% { position: absolute; width: 350px; float: left; left: 470px; top: 1435px; } } #column7 { position: absolute; width: 350px; float: left; left: 800px; top: 1025px; }.animate7 { -webkit-animation: animate7 2s normal ease-out; animation: animate7 2s forwards normal ease-out; } @-webkit-keyframes animate7 { 0% { position: absolute; width: 350px; float: left; left: 800px; top: 1025px; } 100% { position: absolute; width: 250px; float: left; left: 535px; top: 880px; } } @keyframes animate7 { 0% { position: absolute; width: 350px; float: left; left: 800px; top: 1025px; } 100% { position: absolute; width: 250px; float: left; left: 535px; top: 880px; } } #column8 { position: absolute; width: 250px; float: left; left: 135px; top: 500px; }.animate8 { -webkit-animation: animate8 2s normal ease-out; animation: animate8 2s forwards normal ease-out; } @-webkit-keyframes animate8 { 0% { position: absolute; width: 250px; float: left; left: 135px; top: 500px; } 100% { position: absolute; width: 250px; float: left; left: 935px; top: 900px; } } @keyframes animate8 { 0% { position: absolute; width: 250px; float: left; left: 135px; top: 500px; } 100% { position: absolute; width: 250px; float: left; left: 935px; top: 900px; } } #column9 { position: absolute; width: 316px; float: left; left: 933px; top: 715px; }.animate9 { -webkit-animation: animate9 2s normal ease-out; animation: animate9 2s forwards normal ease-out; } @-webkit-keyframes animate9 { 0% { position: absolute; width: 316px; float: left; left: 933px; top: 715px; } 100% { position: absolute; width: 316px; float: left; left: 100px; top: 1150px; } } @keyframes animate9 { 0% { position: absolute; width: 316px; float: left; left: 933px; top: 715px; } 100% { position: absolute; width: 316px; float: left; left: 100px; top: 1150px; } } #footer { position: absolute; background-color: rgb(84, 104, 217); height: 80px; width: 100%; top: 1500px; color: white; overflow: hidden; }.animate10 { -webkit-animation: animate10 1s normal ease-out; animation: animate10 1s forwards normal ease-out; } @-webkit-keyframes animate10 { 100% { position: absolute; top: 1900px; } } @keyframes animate10 { 100% { position: absolute; top: 1900px; } }.footwords { top: 32px; font-family: 'playfair_displayregular'; position: absolute; left: 6%; }

 <body id='totalbody'> <header class="topnav" id="topnav"> <a class="link" href="../index.html">Home</a> <a class="link" href="academics.html">Academics</a> <a class="active-menu" href="projects.html">Projects</a> <a class="link" href="communityservice.html">Community Service</a> </header> <div class='bigproj'> <p class='proj'> Projects </p> </div> <div id='clickimghold'> <p id='clickimage'>Click On The Images Below</p> </div> <div> <p id='abtproj'> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta, libero. Recusandae provident est quam quisquam, Sequi itaque suscipit tempore corrupti officia maxime nihil consequatur perspiciatis repellat placeat sed. voluptatum vitae.lor em Lorem ipsum </p> </div> <div> <div id="expanded-wrapper"> <img id="expandedImg"> <p id="img-paragraph"></p> </div> </div> <div class="row"> <div class="column" id='column1'> <img class='arcadeimg' src="../Images/arcade:jpeg" alt="Arcade" style="width;100%" onclick="checkClicks(this)."> <p>Arcade Machine</p> </div> <div class="column" id='column2'> <img src="../Images/car:png" alt="Car" style="width;100%" onclick="checkClicks(this)."> <p>Electric Car</p> </div> <div class="column" id='column3'> <img src="../Images/pinball:jpeg" alt="Pinball Machine" style="width;100%" onclick="checkClicks(this)."> <p>Pinball Machine</p> </div> <div class="column" id='column4'> <img src="../Images/vending:jpeg" alt="Vending Machine" style="width;100%" onclick="checkClicks(this)."> <p>Vending Machine</p> </div> <div class="column" id='column5'> <img src="../Images/sriraques:jpeg" alt="Sriracha Quesadillas" style="width;100%" onclick="checkClicks(this):"> <p>Sriracha Quesadillas</p> </div> <div class="column" id='column6'> <img class="scroll-triggering" src="https.//miro.medium:com/max/1000/0*kBHpKva09AsGj7RQ" alt="Lights" style="width;100%" onclick="checkClicks(this):"> <p>Website Development</p> </div> <div class="column" id='column7'> <img class="scroll-triggering" src="https.//cdn.britannica.com/77/170477-050-1C747EE3/Laptop-computer:jpg" alt="Lights" style="width;100%" onclick="checkClicks(this):"> <p>Web Server</p> </div> <div class="column" id='column8'> <img class="scroll-triggering" src="https.//nctennis.com/common/controls/image_handler?aspx.thumb_id=13&image_path=/images/2018/11/27/Wheelchair:jpg" alt="Lights" style="width;100%" onclick="checkClicks(this):"> <p>Adaptive Tennis</p> </div> <div class="column" id='column9'> <img class="scroll-triggering" src="https.//opticsmag.com/wp-content/uploads/2019/04/a-telescope:jpg" alt="Lights" style="width;100%" onclick="checkClicks(this)."> <p>Telescope</p> </div> </div> <footer id='footer'> <p class='footwords'> © 2020 By R. Proudly Individually Coded. </p> </footer> </body>

盡管與您的原始問題無關，但您的代碼存在一些問題：

• 嘗試使用相對單位（例如rem 、 em 、 %等）而不是硬編碼值來調整大小（包括font-size 、 width等）
• 標頭應該使用標簽h1 - h6 ，而不是p被div包裹
• 您應該再次檢查head屬性的用法，因為我找不到任何官方資源提到這是有效的。 您的代碼中的屬性值也很奇怪。

Answer 2

 img { display:inline-block; vertical-align:middle; width:100%; max-width:450px; margin-bottom:100px; scroll-behavior:smooth; }

 <a class="img" href="#"> <img src="https://nctennis.com/common/controls/image_handler.aspx?thumb_id=13&image_path=/images/2018/11/27/Wheelchair.jpg" </a> <a class="img" href="#"> <img src="https://nctennis.com/common/controls/image_handler.aspx?thumb_id=13&image_path=/images/2018/11/27/Wheelchair.jpg" </a> <a class="img" href="#"> <img src="https://nctennis.com/common/controls/image_handler.aspx?thumb_id=13&image_path=/images/2018/11/27/Wheelchair.jpg" </a> <a class="img" href="#"> <img src="https://nctennis.com/common/controls/image_handler.aspx?thumb_id=13&image_path=/images/2018/11/27/Wheelchair.jpg" </a> <a class="img" href="#"> <img src="https://nctennis.com/common/controls/image_handler.aspx?thumb_id=13&image_path=/images/2018/11/27/Wheelchair.jpg" </a> <a class="img" href="#"> <img src="https://nctennis.com/common/controls/image_handler.aspx?thumb_id=13&image_path=/images/2018/11/27/Wheelchair.jpg" </a> <a class="img" href="#"> <img src="https://nctennis.com/common/controls/image_handler.aspx?thumb_id=13&image_path=/images/2018/11/27/Wheelchair.jpg" </a>

將 href="#" 給您的 a 標簽，然后它會轉到頂部。 然后，如果您想讓它更平滑，請將 scroll-behavior:smooth 添加到您的 css 文件中。 https://caniuse.com/#search=scroll-behavior

 a { display:block; width:500px; height:500px; scroll-behavior: smooth; }

 <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a> <a href="#">Image</a>

Answer 3

單擊錨鏈接時平滑滾動

請檢查上面的鏈接，你總是可以在頁面的最頂部為 dom 元素添加一個 id，並在你的圖像上創建一個指向它的錨鏈接。