ScrollUp nie działa (jquery)

pytanie zadane 1 listopada 2017 w JavaScript przez bicnet Gaduła (4,800 p.)

Witam, mam kod:

var $scrollUpIcon = $("#scroll-up")
var $header = $("header")

function scrollUp()
{
  $("html,body").animate(
    {
      scrollTop: $header.offset().top
    }, 1000)
}
$scrollUpIcon.on("click", scrollUp)

<body>
     <header>
           <nav> <i class="fa fa-bars" aria-hidden="true"></i></nav>
                 <hgroup>
                         <h1>Lorem</h1>
                 </hgroup>
                 <img src="img-to-index.png" />
                 <div id="arrow"><i class="fa fa-arrow-down" aria-hidden="true"></i></div>
     </header>
     <main>
       <div id="scroll-up"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i></div>
     </main>


<script src="javas.js"></script>
<script src="scrollup.js"></script>
</body>

Ale scroll do góry nie działa a w dodatku na samym dole jest malutki kawałek pierwszej warstwy.

Z góry dziękuję za odpowiedź.

1	komentarz 1 listopada 2017 przez shotokan Nałogowiec (39,660 p.) Ja mam takie coś i mi to działa: $('jakiś_przycisk').click(function() { $('html, body').animate({ scrollTop: 0 }, 600); return false; });

komentarz 1 listopada 2017 przez niezalogowany

Kod, który wrzuciłeś, działa.

komentarz 1 listopada 2017 przez bicnet Gaduła (4,800 p.)

Dzięki, twój kod jest nawet lepszy, ale jeszcze jest problem tego kawałka (zdj poniżej).

komentarz 1 listopada 2017 przez shotokan Nałogowiec (39,660 p.)

Hmmm, spróbuj zbadać dany element wykorzystując narzędzia przeglądarki np. klikając F12 i tam poszukać, co jest nie tak, popatrz na style, na margin, padding, zobacz na wymiary warstwy tej dolnej i górnej... trudno Ci pomóc nie mając pełnego kodu strony:)

komentarz 1 listopada 2017 przez bicnet Gaduła (4,800 p.)

*
{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}

html
{
  font-size: 10;
}

header
{
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow-x: hidden;
 z-index: 1;
}

main
{
  height: 100vh;
  margin-top: 100vh;
  background: lightgrey;
  position: relative;
  z-index: 2;
}

#scroll-up
{
  width: 51px;
  height: 51px;
  position: absolute;
  right: 10%;
  bottom: 5%;
  text-align: center;
  font-size: 5rem;
}

header img
{
  position: absolute;
  bottom: 0;
  height: 85%;
  right: 3%;
  z-index: -1;
}

header nav
{
  position: absolute;
  right: 4%;
  top: 3%;
  font-size: 3rem;
}

header hgroup
{
  position: absolute;
  top: 2%;
  left: 11%;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
}

header h1
{
 font-size: 2.5rem;
}

#arrow
{
  color: white;
  opacity: 0.5;
  width: 40px;
  height: 40px;
  border: 4px solid white;
  border-radius: 50%;
  position: absolute;
  bottom: 2%;
  right: 45%;
  text-align: center;
  font-size: 1.5rem;
}

#arrow:hover
{
    text-shadow: 0 -10px 0 white;
    color: white;
    opacity: 0.9;
    overflow: hidden;
}

.fa-arrow-down
{
  animation: arrow 1.6s infinite linear;
}

@media (orientation: landscape)
{
   header img
   {
     position: absolute;
     bottom: 0;
     height: 82%;
     right: 25%;
     z-index: -1;
   }
 }
   header hgroup
   {
     position: absolute;
     top: 2%;
     left: 30%;
     font-family: 'Oswald', sans-serif;
     text-transform: uppercase;
   }
}

Proszę i css'a