Simple jQuery scrollTo will not work/animate

Question

Simple jQuery scrollTo will not work/animate

83 views Asked by tom1bomb At 05 February 2014 at 20:56

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 :)

Original Q&A

There are 2 answers

**adeneo** · Answer 1 · 2014-02-05T21:00:29+00:00

adeneo On 05 February 2014 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');
    });
});

**DaniP** · Answer 2 · 2014-02-05T21:13:28+00:00

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

TechQA.

Simple jQuery scrollTo will not work/animate

There are 2 answers

Related Questions in JQUERY

Related Questions in SCROLL

Related Questions in JQUERY-ANIMATE

Related Questions in HREF

Related Questions in JQUERY-SCROLLABLE

Popular Questions

Popular Tags

Trending Questions