Why is JS not scrolling to the top?

I am pretty new to code. I am making a personal website and I want a menu that, when you click on the a certain topic, automatically scrolls to that part on the site. I come from the graphic designer world.

When you click on contact, it does what it’s supposed to. But when you click on Explore, it goes to a position not at the top, but a bit below. I want it go to to the top, but for some reason it doesnt work. Most of my JS i got from Stackoverflow btw.

BTW image looks a bit weird, thats because of the window resolutions of the snippet. need to find a way to fix that too.

What I want: when clicking on the menu at the upper left corner, and then explore, the page has to smooth-scroll to the top.

Just try it out on the snippet, you’ll understand my problem.

(I am using safari, macOS)

function myFunction() {
    if($("#myDropdown").is(":visible")){
        $("#myDropdown").fadeOut(); 
    } else {
        $("#myDropdown").fadeIn();
    }
   }
   
   window.onclick = function(event) {
   if (!event.target.matches('.dropbtn')) {
   
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      $("#myDropdown").fadeOut();
    }
   }
   }
   
   $(function()
   {
   $("#btnButton1").click(myFunction);
   });
   
   $("a[href='#bottom']").click(function() {
   $("html, body").animate({ scrollTop: $(document).height() }, "slow");
   return false;
   });
   
   $("a[href='#']").click(function() {
   $("html, body").animate({ scrollTop:  $(functionid).height() }, "fast");
   return false;
   });
#btnButton1:hover + #img {
   opacity: 0.7;
   transition: opacity .3s;
   }
   #drpbtn:hover {
   opacity: 0.7;
   transition: opacity .3s;
   }
   .Menu {
   cursor: pointer;
   position: fixed;
   top: 17px;
   left: 17px;
   opacity: 1;
   z-index:5;
   color: white;
   transition: opacity .3s;
   }
   button:focus {outline:0;}
   .dropbtn {
   border: none;
   cursor: pointer;
   position: fixed;
   top: 17px;
   left: 17px;
   opacity: 1;
   background-color: transparent;
   z-index: 6;
   color: white;
   width: 24px;
   height: 24px;
   }
   .dropdown {
   position: relative;
   display: inline-block;
   }
   .dropdown-content {
   z-index: 3;
   display: none;
   position: fixed;
   background-color: #141414;
   min-width: 160px;
   overflow: auto;
   box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
   top: 60px;
   width: 100%;
   left: 0px;
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
   background-color: rgba(0, 0, 0, 0.6);
   }
   .dropdown-content a {
   color: white;
   padding: 13px 18px;
   text-decoration: none;
   display: block;
   font-family: Helvetica;
   font-weight: 200;
   opacity: 1;
   transition: color .3s;
   letter-spacing: 2px;
   }
   .dropdown a:hover {
   color: #a3a3a3;
   transition: color .3s;
   }
   .show {
   display:block;
   }
   .Logo {
   position: fixed;
   z-index: 6;
   left: 50%;
   top: 14px;
   opacity: 1;
   transform: translate(-50%, 0);
   transition: opacity .3s;
   }
   .Logo:hover, .Logo:focus {
   opacity: 0.7;
   transition: opacity .3s;
   }
   .Menu:hover {
   opacity: 0.7;
   transition: opacity .3s;
   }
   .back {
   left: 0%;
   top: 0px;
   position: fixed;
   z-index: 2;
   position: absolute;
   width: 100%;
   height: 100%;
   }
   .fixedbar {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 4;
   width: 100%;
   height: 60px;
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   background-color: rgba(0, 0, 0, 0.7);
   }
   .contact {
   margin-top: 36px;
   position: absolute;
   z-index: 3;
   top: 100%;
   left: 50%;
   font-family: Helvetica;
   color: black;
   font-size: 16px;
   transform: translate(-50%, 0);
   font-weight: 200;
   }
   .info {
   position: absolute;
   z-index: 6;
   top: 100%;
   margin-top: 78px;
   left: 50%;
   font-family: Helvetica;
   color: black;
   font-size: 14px;
   transform: translate(-50%, 0);
   text-decoration: none;
   font-weight: 200;
   }
   .info a:link {
   color: black;
   text-decoration: none;
   }
   .info a:visited {
   color: black;
   text-decoration: none;
   }
   .info a:hover {
   color: black;
   text-decoration: underline;
   }
   .info a:active {
   color: black;
   text-decoration: none;
   }
   .insta {
   position: absolute;
   z-index: 6;
   top: 100%;
   margin-top: 118px;
   left: 50%;
   transform: translate(-50%, 0);
   transition: filter .3s;
   opacity: 1
   }
   .insta:hover, .insta:focus {
   opacity: 0.7;
   transition: opacity .3s;
   }
   .contactb {
   background-color: #f2f2f2;
   top: 100%;
   width: 100%;
   left: 0;
   height: 162px;
   position: absolute;
   z-index: 2;
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
   <title color="white">
      dnsvnr 
   </title>
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=jwL2yROogB">
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=jwL2yROogB">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=jwL2yROogB">
   <link rel="manifest" href="/site.webmanifest?v=jwL2yROogB">
   <link rel="mask-icon" href="/safari-pinned-tab.svg?v=jwL2yROogB" color="#5bbad5">
   <link rel="shortcut icon" href="/favicon.ico?v=jwL2yROogB">
   <meta name="msapplication-TileColor" content="#5bbad5">
   <meta name="theme-color" content="#5bbad5">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <div class="dropdown">
      <button id="btnButton1" class="dropbtn" >
      </button>
      <img id="img"src="http://www.dnsvnr.com/Menu.png" width="24" height="24" class="Menu" />
      <div id="myDropdown" class="dropdown-content">
         <a href="/">Home</a>
         <a id="functionid" href="#">Explore</a>
         <a id="document" href="#bottom">Contact</a>
      </div>
   </div>
<body>
   <a href="/"><img src="http://www.dnsvnr.com/logo.png" class="Logo" width="32" height="32"/></a>
</body>
<back class="background"></back>
<nav class="fixedbar"></nav>
<center id="contact" class="contact"> Contact </center>
<center class="info">
   <a href="mailto:info@dnsvnr.com">email: info@dnsvnr.com</a>
</center>
<a href="http://www.instagram.com/dnsvnr" target="_blank"><img src="http://www.dnsvnr.com/insta.png"   class="insta" width="16" height="16"/></a>
<nav class="contactb"></nav>
<img class="back" src="http://s3-eu-west-1.amazonaws.com/fthtsi-assets-production/ez/images/8/3/6/5/125638-1-eng-GB/main_6e766fc6-3097-4df1-93a9-4228f60f2f27.jpg">

90 thoughts on “Why is JS not scrolling to the top?”

Leave a Comment