For some reason I cant seem to get my anchor tag to link to a div id lower down in the page. Heres a [link](http://iclinic.meteor.com/) to the broken site, try and click on How it works and minimize your window to allow for the scroll to happen, it doesn't scroll down the page and I'm not sure why. I am trying to solve this now with javascript (specifically jQuery and meteors template events) I think meteor was preventing to classic way of doing this from working, but Im still stuck.

***I am using meteor so I think this might be my problem, I am trying a different solution now, but it is not working***

JS

```
Template.postsList.events({
  'click #worksClick':function(e,tmpl) {
      e.preventDefault();
      $('html, body').animate({
          scrollTop: $("#works").offset().top
      }, 600);
   }
});

```

HTML

```
<template name="postsList">

<div class="container">

  <div class="logo">
    <h1>iClinic</h1>
  </div>

  <nav class="topNav">
    <ul>
      <li><a id="worksClick" href="#works">How it works</a></li>
      <li><a href="#">Applications</a></li>
      <li><a href="#">Our Story</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Reach Us</a></li>
    </ul>
  </nav>

  <div class="mastHead">
    <header>
      <h2>iClinic helps the medical professional bring superior health-care to all people</h2>
    </header>
  </div><!--mastHead ends-->

  <div class="detailsWrapper">

    <section class="details">
      <h3>The more you know the better you can treat.</h3>
    </section>

  </div>

  <div id="works" class="worksWrapper">

    <section class="works">
      <h3>How it Works</h3>
      <p>iClinic runs on any web browser or Windows computer, you simply create a account and begin to intergrate your existing and new patient data into iClinic</p>
    </section>

  </div>

  <div id="workas" class="worksWrapper">

    <section class="works">
      <h3>How it Works</h3>
      <p>iClinic runs on any web browser or Windows computer, you simply create a account and begin to intergrate your existing and new patient data into iClinic</p>
    </section>

  </div>

</div><!--container ends-->

</template>

```

[STYLUS](http://learnboost.github.io/stylus/) (which complies to css this is not incorrectly written css)

```
*
  margin 0
  padding 0

.container
  width 100%

.adminNav
  display none

html
  font-size 90%
  font-family 'Source Sans Pro', sans-serif

.logo
  float left
  background #7d7d7d
  width 15%
  padding 3rem 0 3rem 0
  //padding-top 3.5rem
  h1
    font-size 4rem
    font-weight 100
    letter-spacing: 0.2rem
    text-align center
    color #fff

.topNav
  float left
  width 85%
  padding 4.7rem 0 3.8rem 0
  background #d3d3d3
  ul
    li
      display inline
      font-size 2rem
      font-weight 100
      a
        margin-left 3rem
        text-decoration none
        color #fff

.mastHead
  background #989797 url("http://www.proteus.com/assets/helius_professional_header2.jpg")
  background-size cover
  background-position 0 -5rem
  background-repeat no-repeat
  background-attachment fixed
  -webkit-filter: grayscale(100%);s
  width 100%
  clear left

header
  width 66%
  margin auto
  padding-top 5rem
  padding-bottom 5rem
  h2
    font-size 4rem
    font-weight 500
    letter-spacing 0.2rem
    text-align center
    color #fff
    text-shadow 2px 2px 2px #000

@media(min-width:1400px)
  header
    width 50%
    padding-top 20rem
    padding-bottom 20rem

.detailsWrapper
  width 100%
  background #989797
  float left

.details
  width 66%
  margin auto
  text-align center
  padding 5rem 0 5rem 0

  h3

    font-size 3rem
    font-weight 100
    color #fff
    letter-spacing 0.3rem

.worksWrapper
  width 100%
  float left
  background rgba(155, 154, 154, 0.18)

.works
  width 66%
  margin auto
  text-align center
  padding 5rem 0 5rem 0

  h3

    font-size 3rem
    font-weight 100
    color #fff
    letter-spacing 0.3rem

```

COMPILED CSS

```
* {
    margin: 0;
    padding: 0
}

.container {
    width: 100%
}

.adminNav {
    display: none
}

html {
    font-size: 90%;
    font-family: 'Source Sans Pro', sans-serif
}

.logo {
    float: left;
    background: #7d7d7d;
    width: 15%;
    padding: 3rem 0 3rem 0
}

.logo h1 {
    font-size: 4rem;
    font-weight: 100;
    letter-spacing: 0.2rem;
    text-align: center;
    color: #fff
}

.topNav {
    float: left;
    width: 85%;
    padding: 4.7rem 0 3.8rem 0;
    background: #d3d3d3
}

.topNav ul li {
    display: inline;
    font-size: 2rem;
    font-weight: 100
}

.topNav ul li a {
    margin-left: 3rem;
    text-decoration: none;
    color: #fff
}

.mastHead {
    background: #989797 url("http://www.proteus.com/assets/helius_professional_header2.jpg");
    background-size: cover;
    background-position: 0 -5rem;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-filter: grayscale(100%);
    width: 100%;
    clear: left
}

header {
    width: 66%;
    margin: auto;
    padding-top: 5rem;
    padding-bottom: 5rem
}

header h2 {
    font-size: 4rem;
    font-weight: 500;
    letter-spacing: 0.2rem;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 2px #000
}

@media (min-width: 1400px) {
    header {
        width:50%;
        padding-top: 20rem;
        padding-bottom: 20rem
    }
}

.detailsWrapper {
    width: 100%;
    background: #989797;
    float: left
}

.details {
    width: 66%;
    margin: auto;
    text-align: center;
    padding: 5rem 0 5rem 0
}

.details h3 {
    font-size: 3rem;
    font-weight: 100;
    color: #fff;
    letter-spacing: 0.3rem
}

.worksWrapper {
    width: 100%;
    float: left;
    background: rgba(155,154,154,0.18)
}

.works {
    width: 66%;
    margin: auto;
    text-align: center;
    padding: 5rem 0 5rem 0
}

.works h3 {
    font-size: 3rem;
    font-weight: 100;
    color: #fff;
    letter-spacing: 0.3rem
}

```