Smooth scrolling when a user clicks an anchor

[killfrog47]

I am trying to make my personal website a little slicker looking. I know the direction I want to go with it but I am having trouble getting it to work. I want a one page website but I dont really know how to get it to scroll smooth. I tried some random scripts I found on stackoverflow but they didnt work. I googled the problem but still nothin =/ Does anyone have any pointers? What should I search for?

[Temor]

I think I know what you mean. I may be wrong though

http://flesler.com/jquery/scrollTo/

ScrollTo is what I'm using. It's really easy to use

[killfrog47]

Yeah! I saw that but IDK why I didnt look more into it. How do I use it? Would it be [syntax=javascript]$('#homeNavBtn').scrollTo('#home');[/syntax] along those lines?

[Helx]

[syntax=javascript]<a href="#about" onclick="$('html, body').animate({ scrollTop: $('#about').offset().top }, 400);event.preventDefault();">About</a>[/syntax]

Clicking will scroll to:

[syntax=xhtml]<div id="about">asdfdsf sd fdhujgsdkxjhcgf</div>[/syntax]

Using jQuery. Always have the link use href to an id (how you should be doing it anyway), so there's something to fall back on (eg. user disabled JavaScript). I never got this to work without the onclick event, I guess it may just be caching.

That 'preventDefault' thing will stop the page from flashing.

Hopefully that helps?

[Temor]

I completely forgot about this thread, sorry about that.

[killfrog47]

[syntax=javascript]<a href="#about" onclick="$('html, body').animate({ scrollTop: $('#about').offset().top }, 400);event.preventDefault();">About</a>[/syntax]

Clicking will scroll to:

[syntax=xhtml]<div id="about">asdfdsf sd fdhujgsdkxjhcgf</div>[/syntax]

Using jQuery. Always have the link use href to an id (how you should be doing it anyway), so there's something to fall back on (eg. user disabled JavaScript). I never got this to work without the onclick event, I guess it may just be caching.

That 'preventDefault' thing will stop the page from flashing.

Hopefully that helps?

This does help! Thanks Here is what I did:
[syntax=javascript]<script>
$(document).ready(function(){
$('#nav').localScroll({target:'body'})
});
$(document).ready(function(){
$('.topBtn').localScroll({target:'body'})
});
</script>[/syntax]

Then for my HTML I have this:
[syntax=xhtml]
<nav class="links">
<ul id="nav">
<li><a href="#home" class="navBtn">Home</a></li>
<li><a href="#about" class="navBtn">About Me</a></li>
<li><a href="#resume" class="navBtn">Resume</a></li>
<li><a href="#portfolio" class="navBtn">Portfolio</a></li>
<li><a href="#contact" class="navBtn">Contact</a></li>
</ul>
</nav>
[/syntax]

Im using github so I can work on my laptop and desktop and not have to worry about flash drives and stuff. This is my full page (and its working =D) https://github.com/killfrog47/tomascord ... index.html

I couldnt get it to work I didnt even think about doing onclick... lol

I completely forgot about this thread, sorry about that.

No worries haha forced me to learn =)

[ScTech]

Why the two document ready calls?

[killfrog47]

Why the two document ready calls?

I did it because I was getting trouble with it and I dont know too much about jquery or javascript lol. I figured it worked and I dont want to go messing it up so I left it