Menu
Forums
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Trending
What's new
New posts
New profile posts
Latest activity
Members
Current visitors
New profile posts
Search profile posts
Upgrades
Log in
Register
What's new
Search
Search
Search titles only
By:
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
Software Development
Programming
Tutorials
jQuery Animated Scroll to DIV
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="Sysode" data-source="post: 281675" data-attributes="member: 25453"><p>So, before I start I'd just like to point that <strong>this tutorial's credit does not all go to me, I've used the script from css-tricks.</strong> I am simply just reposting, in order to try and explain it in an easier way for others.</p><p></p><p>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.</p><p></p><p>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..</p><p></p><p>Firstly, create a new file and call it anything you'd like. In the file, add this script:</p><p>[CODE]$(function() {</p><p> $('a[href*=#]:not([href=#])').click(function() {</p><p> if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {</p><p> var target = $(this.hash);</p><p> target = target.length ? target : $('[name=' + this.hash.slice(1) +']');</p><p> if (target.length) {</p><p> $('html,body').animate({</p><p> scrollTop: target.offset().top</p><p> }, 1500);</p><p> return false;</p><p> }</p><p> }</p><p> });</p><p>});[/CODE]</p><p>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.</p><p></p><p>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:</p><p>[CODE]<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script></p><p> <script src="location/javascript.js"></script></p><p>[/CODE]</p><p></p><p><strong>First line</strong>: 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 <a href="http://jquery.com/download/" target="_blank">here</a>.</p><p></p><p><strong>Second line</strong>: This links to where your newly created jQuery file is located. So remember to change "location/javascript.js" to your file location!</p><p></p><p></p><p>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.</p><p>It should look something like this:</p><p>[HTML]<a href="" title="this will scroll">Your Scrolling Link</a>[/HTML]</p><p>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:</p><p>[HTML]<a href="#scroll" title="this will scroll">Your Scrolling Link</a>[/HTML]</p><p>Notice now how the href attribute has "#scroll" assigned to it? This will be your link.</p><p>The # stands for ID, therefor meaning it will scroll to an element with the ID of scroll.</p><p></p><p>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:</p><p>[CODE]<section id="scroll"></section>[/CODE]</p><p>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.</p><p></p><p>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 <strong>change your navigation to, you change your element you want to scroll to, as well</strong>.</p><p></p><p>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.</p></blockquote><p></p>
[QUOTE="Sysode, post: 281675, member: 25453"] So, before I start I'd just like to point that [B]this tutorial's credit does not all go to me, I've used the script from css-tricks.[/B] 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: [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; } } }); });[/CODE] 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: [CODE]<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="location/javascript.js"></script> [/CODE] [B]First line[/B]: 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 [URL='http://jquery.com/download/']here[/URL]. [B]Second line[/B]: 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] 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: [HTML]<a href="#scroll" title="this will scroll">Your Scrolling Link</a>[/HTML] 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: [CODE]<section id="scroll"></section>[/CODE] 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 [B]change your navigation to, you change your element you want to scroll to, as well[/B]. 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. [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
Software Development
Programming
Tutorials
jQuery Animated Scroll to DIV
Top