Sysode
Front-End Developer
- Dec 11, 2012
- 1,673
- 848
So, before I start I'd just like to point that this tutorial's credit does not all go to me, I've used the script from css-tricks. I am simply just reposting, in order to try and explain it in an easier way for others.
Basically, this is a simple effect that can often make websites feel that little bit "slick". How it works: When a user is to click a link, they will animate a scroll to a specific area - which you have set up.
Here's how we do it. In order to start, I suggest you have your page set up already - with the sections and navigation. Lets start..
Firstly, create a new file and call it anything you'd like. In the file, add this script:
This is the jQuery code for your site. This is essentially what will cause the animation effect when a user clicks the link. All you have to do now, is set up your page so that is uses this correctly.
First, we're going to link your jQuery and the jQuery library - if you haven't already. This can either be added before the </head> section of your site or just before you close your </body> tag. An example of this can be seen here:
First line: Links to the jQuery library which is needed in order for any of the jQuery elements to work. Im using an external file hosted on google, alternatively you can download jQuery
Second line: This links to where your newly created jQuery file is located. So remember to change "location/javascript.js" to your file location!
Now we've linked it, all we have to do it add a couple of things and we're complete. Head on over in to your navigation part of your site and locate the link you want to use.
It should look something like this:
Notice how the href attribute is empty? This is what you are going to fill with what we need. As this is an example, we'll fill with this:
Notice now how the href attribute has "#scroll" assigned to it? This will be your link.
The # stands for ID, therefor meaning it will scroll to an element with the ID of scroll.
Now all that is left to do is to set up that element with the ID of scroll. This can be a <div> tag, a <section> tag or even a <h1> header tag. An example is shown below:
I've decided to use the <section> tag. As I have assigned the ID of scroll to this element, it'll mean that when the navigation link we assigned earlier is clicked it will jump to the this ID element. However, it will scroll because of the jQuery we added earlier on in the tutorial.
You are able to do this with any name for an ID. For example, you could switch that round so the link was "#scroll2" but just make sure what ever you change your navigation to, you change your element you want to scroll to, as well.
I now realise this is a big ass piece of writing and I'm a sad fucker for doing this. Anyway, hope it helps.. If you follow this step by step, achieving the end product will be easier. If you get stuck, feel free to comment below. Thanks.
Basically, this is a simple effect that can often make websites feel that little bit "slick". How it works: When a user is to click a link, they will animate a scroll to a specific area - which you have set up.
Here's how we do it. In order to start, I suggest you have your page set up already - with the sections and navigation. Lets start..
Firstly, create a new file and call it anything you'd like. In the file, add this script:
Code:
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1500);
return false;
}
}
});
});First, we're going to link your jQuery and the jQuery library - if you haven't already. This can either be added before the </head> section of your site or just before you close your </body> tag. An example of this can be seen here:
Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="location/javascript.js"></script>First line: Links to the jQuery library which is needed in order for any of the jQuery elements to work. Im using an external file hosted on google, alternatively you can download jQuery
You must be registered for see links
.Second line: This links to where your newly created jQuery file is located. So remember to change "location/javascript.js" to your file location!
Now we've linked it, all we have to do it add a couple of things and we're complete. Head on over in to your navigation part of your site and locate the link you want to use.
It should look something like this:
HTML:
<a href="" title="this will scroll">Your Scrolling Link</a>
HTML:
<a href="#scroll" title="this will scroll">Your Scrolling Link</a>The # stands for ID, therefor meaning it will scroll to an element with the ID of scroll.
Now all that is left to do is to set up that element with the ID of scroll. This can be a <div> tag, a <section> tag or even a <h1> header tag. An example is shown below:
Code:
<section id="scroll"></section>You are able to do this with any name for an ID. For example, you could switch that round so the link was "#scroll2" but just make sure what ever you change your navigation to, you change your element you want to scroll to, as well.
I now realise this is a big ass piece of writing and I'm a sad fucker for doing this. Anyway, hope it helps.. If you follow this step by step, achieving the end product will be easier. If you get stuck, feel free to comment below. Thanks.
Last edited:
