Smooth scrolling when a user clicks an anchor
- killfrog47
- Posts: 106
- Joined: Tue Mar 12, 2013 2:52 am
- Location: Tempe, AZ
- Contact:
Smooth scrolling when a user clicks an anchor
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?
Re: Smooth scrolling when a user clicks an anchor
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
http://flesler.com/jquery/scrollTo/
ScrollTo is what I'm using. It's really easy to use
- killfrog47
- Posts: 106
- Joined: Tue Mar 12, 2013 2:52 am
- Location: Tempe, AZ
- Contact:
Re: Smooth scrolling when a user clicks an anchor
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?
Re: Smooth scrolling when a user clicks an anchor
[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?
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?
Re: Smooth scrolling when a user clicks an anchor
I completely forgot about this thread, sorry about that.
- killfrog47
- Posts: 106
- Joined: Tue Mar 12, 2013 2:52 am
- Location: Tempe, AZ
- Contact:
Re: Smooth scrolling when a user clicks an anchor
Helx wrote:[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
Temor wrote:I completely forgot about this thread, sorry about that.
No worries haha forced me to learn =)
Re: Smooth scrolling when a user clicks an anchor
Why the two document ready calls?
<?php while(!$succeed = try()); ?>
- killfrog47
- Posts: 106
- Joined: Tue Mar 12, 2013 2:52 am
- Location: Tempe, AZ
- Contact:
Re: Smooth scrolling when a user clicks an anchor
ScTech wrote: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