scroll w query nie działa

pytanie zadane 31 października 2017 w JavaScript przez bicnet Gaduła (4,800 p.)

Witam,

dziś mój pierwszy dzień z jquery, więc chciałem stworzyć coś prostego, a mianowicie scrolla do zawartości poniżej , ale jednak on nie działa.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Strona internetowa</title>
  <link rel="stylesheet" href="style.css" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Oswald:400,700&amp;subset=latin-ext" rel="stylesheet">
</head>
<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></main>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.js"></script>



</body>
</html>

#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;
}

var $arrow = $("#arrow")
var $main = $("main")
var $off = $main.offset().top

function animation()
{
  $("body").animate(
    {
    scrollTop: $off
    } , 1000)
}

$arrow.on("click", animation())

Może jest ktoś w stanie pomóc?