# jQuery animate

**URL:** <https://forum.kirupa.com/t/jquery-animate/327341>\
**Category:** web dev\
**Created:** [February 22, 2012, 8:12pm UTC](https://forum.kirupa.com/t/jquery-animate/327341 "2012-02-22T20:12:00Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ineedsleep](https://avatars.discourse-cdn.com/v4/letter/i/e5b9ba/32.png) [@Ineedsleep](https://forum.kirupa.com/u/Ineedsleep)\
**Post date:** [February 22, 2012, 8:12pm UTC](https://forum.kirupa.com/t/jquery-animate/327341/1 "2012-02-22T20:12:00Z")

</div>

Hi,  
I made this site for a friend, this is the first time Ive used jQuery and Im a little stumped.

I want it so when I click on the navigation I want it to go to the div with that id with a nice animation, I may want it to add padding or spacing so I decided to use the offSet().top() property so I could manipulate the result.

```php
<script type="text/javascript"> $(document).ready(function() {
$("a").click(function() {
var myTemp = this.id;
var myName = myTemp.substring(3, myTemp.length); $('.click').click(function(){ $('html,body').animate({ scrollTop: myName.offSet().top()+"px" }, 3000);}); 
  });
});    
</script>

```

[stephenmulvain.com/hungrytums](http://stephenmulvain.com/hungrytums)  
so when you click on the navigation it takes you to the sections below each of the sections have an id relating the id of the button

Can anyone help?

Thanks