How to get my website to scroll to the top when I click on an image

Question

I wan't to have my website so that when you click on an image, it scrolls you back to the top of the page automatically. I've tried some versions I've seen online, but they haven't worked for me. I would be very grateful if you guys could give it a shot. Let me know if you have any questions. Thanks

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>

Richard · Accepted Answer · 2020-06-14T11:18:27.197

You can simply add a window.scrollTo({top: 0, behavior: 'smooth')} handler on the click listener for each image that can trigger scroll. In this example, I've given the images that trigger scroll the 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>

Some concerns, although unrelated to your original question, on your code:

Try to adjust sizes (including font-size, width, etc.) using relative units (e.g. rem, em, %, etc.) and not hard-coded values
Headers should use the tag h1-h6, not p wrapped by a div
You should check again the usage of the head attribute as I can't find any official resources mentioning that this is valid. The value of the attribute in your code is also strange.

Thanks for the answer and advice. I'll try to implement it – Jun 08 '20 at 20:44 — , Jun 08 '20 at 20:44

SoliMoli · Answer 2 · 2020-06-06T14:02:47.173

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>

Give href="#" to your a tags then it goes to the top. Then if you want to make it smoother add scroll-behavior:smooth to your css file. 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>

edited Jun 06 '20 at 14:02

answered Jun 06 '20 at 07:08

SoliMoli

781
2
6
25

where do I put the href tags – Jun 06 '20 at 13:50
No href is not a tag ! In your a tags put this href="#" next to your class like this : Community Service – SoliMoli Jun 06 '20 at 13:52
Im confused... next to which class. Do you mean the class/id on each image? – Jun 06 '20 at 13:54
Look i think its better to put img tag inside a a tag then use href="#" so when user clicked on the image the page goes up cause the link is # which mean same page. – SoliMoli Jun 06 '20 at 13:57
Check my codes again now when you click on any img it goes up. – SoliMoli Jun 06 '20 at 14:03
check my codes again. when you click on every img it goes up and its just because of the href which is inside a tags. – SoliMoli Jun 06 '20 at 14:04
Ahh. I understand. Thank you – Jun 06 '20 at 14:04
I implemented the code here, but I have a problem. Instead of the new code only showing up on (or behind) the images, it shows up on top. I can't get it to move behind the images and still work. Please take a look when you get a chance https://jsfiddle.net/mx8u276r/1/ (also, I switched the css tag to a.images) – Jun 06 '20 at 15:14
If i understood your problem correctly then add: height:100%; width:100%; display:block; to your a.tag mention me if worked or not... :) – SoliMoli Jun 06 '20 at 18:15
I've tried to implement that change here. https://jsfiddle.net/3L92f07m/ It no longer sends you to the top when you click on an image. I think the problem partly stems from the other motions that occur when you click on the image. Take a look – Jun 06 '20 at 18:26
Change a.images styles to: display: block; width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 15; scroll-behavior: smooth; and .column:hover img to: 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; z-index: 0; Does it work now? – SoliMoli Jun 06 '20 at 18:53
https://jsfiddle.net/cdjwgms1/3/ here's the new changes... better now? – SoliMoli Jun 06 '20 at 19:06
The problem with that is the z-index causes the original functionality of the new image appearing at the top to not work anymore... Is it possible to, instead of referencing the href tag, reference the image tag and move the css from a.images to column1 column2 column3 images ect..? – Jun 06 '20 at 19:08

score -1 · Answer 3 · answered Jun 06 '20 at 01:01

-1

Smooth scrolling when clicking an anchor link

Please check the link above, u can always add an id for a dom element at the very top of the page and make an anchor link to it on your image.

answered Jun 06 '20 at 01:01

Hassan Dallal

17
4

How to get my website to scroll to the top when I click on an image

3 Answers3