javascript - 当我点击图片时如何让我的网站滚动到顶部

标签 javascript html css

我不想拥有我的网站，这样当您单击图像时，它会自动将您滚动回页面顶部。我尝试了一些我在网上看到的版本，但它们对我不起作用。如果你们能试一试，我将不胜感激。如果您有任何问题，请告诉我。谢谢

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>

最佳答案

您可以简单地添加 window.scrollTo({top: 0, behavior: 'smooth')}每个可以触发滚动的图像的单击监听器上的处理程序。在这个例子中，我给了触发滚动的图像类 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>


尽管与您的原始问题无关，但您的代码存在一些问题:
  • 尝试使用相对单位(例如 font-size 、 width 、 rem 等)而不是硬编码值
    • 来调整大小(包括 em 、 % 等)
  • 标题应使用标签 h1 - h6 ，而不是 p由 div 包裹
  • 您应该再次检查 head 的使用情况。属性，因为我找不到任何官方资源提到这是有效的。您的代码中的属性值也很奇怪。

    • 关于javascript - 当我点击图片时如何让我的网站滚动到顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62225870/

    上一篇：javascript - 如何仅在嵌套对象具有值时才对其进行解构？

    下一篇：javascript - beforeunload事件之前的Angular8 IFrame

    相关文章：

    javascript - 使用 Jquery 向 HTML 表添加记录

    javascript - Jquery停止事件触发

    c# - asp.net 5 MVC6 中标记助手和 Route 属性之间的奇怪行为

    css - 在不干扰现有主题的情况下使用 Bootstrap 构建 WordPress 插件

    css - 仅将类应用于具有类的元素而不是所有子元素

    javascript - 如何使用href属性来存储元数据？

    javascript - 设置具有相对位置的 div 的最小宽度

    html - 不加载显示 :none 的图像

    javascript - 删除/重新加载已加载的脚本

    javascript - 使用变量属性值从javascript数组中删除对象

    ©2024 IT工具网  联系我们