Simple jQuery scrollTo will not work/animate

Question

I have a fixed header bar with basic navigation like so:

<html>
<head></head>
<body>
<ul class="nav navbar-nav">
  <li><a id="aboutme" href="#about-me">About</a></li>
  <li><a id="workme" href="#work-me">Work</a></li>
  <li><a id="contactme" href="#contact-me">Contact</a></li>
</ul>
...
..
.
<div id="about-me">
</div>
</body>
</html>

I want these to direct to a section in the same page using the 'linear', 'slow' animation values, but my code isn't working:

$(document).ready(function() {

  $('aboutme').click(function() {
    $.scrollTo($("#about-me"),{duration: 1});
  });
});

Do you know where my syntax has gone wrong? And would I need to use the jQuery animatedScroll on github to achieve this?

Thanks :)

Do you have a plugin that would give you a `$.scrollTo` function, or was it just something you for some reason tried ? — adeneo, Feb 05 '14 at 20:58
`$('aboutme').click` must be `$('#aboutme').click` ?? Assuming you are using a plugin that explains the other syntax code. — DaniP, Feb 05 '14 at 21:02
No plugin being used in this function, but there is one available called 'animatedScroll' on github — tom1bomb, Feb 05 '14 at 22:13

score 0 · Answer 1 · answered Feb 05 '14 at 21:00

Anyway, here's how to animate the scrolling without a plugin ?

$(document).ready(function() {
    $('#aboutme').click(function(e) {
       e.preventDefault();
       $('body, html').animate({scrollTop : $('#about-me').offset().top}, 'slow');
    });
});

score 0 · Answer 2 · answered Feb 05 '14 at 21:13

I guess you are using this ScrollTo plugin.

In your function first reference well your button, you have:

$('aboutme')

must be

$('#aboutme')

Then set the time value with just a , like this:

$('#aboutme').click(function(e) {
  e.preventDefault();
  $.scrollTo($("#about-me"),800);
});

Check this Demo Fiddle

Simple jQuery scrollTo will not work/animate

2 Answers2