1 00:00:00,450 --> 00:00:06,270 [Andrew Chalkley] I've been looking through the forum to find unanswered questions, and I found this one by Milagro Lopez. 2 00:00:06,270 --> 00:00:13,120 In this question, she asks about using jQuery to actually do some scrolling on a contact this page. 3 00:00:13,290 --> 00:00:17,540 She didn't include the code in a project, so I've gone ahead and created a similar project, 4 00:00:17,540 --> 00:00:20,470 and I'll show you what it looks like now. 5 00:00:21,960 --> 00:00:30,340 So, if you download the ZIP file and extract it and open up the index to HTML file, you'll see a list of baby names. 6 00:00:30,340 --> 00:00:38,490 And, on the right hand side here, if you click on them, it actually jumps down and that's just using regular HTML. 7 00:00:38,490 --> 00:00:42,660 So, let's take a dive into the HTML code and see what's going on. 8 00:00:43,570 --> 00:00:47,430 So, here we have an unordered list and some list items. 9 00:00:47,430 --> 00:00:51,290 And, each of these list items are letters from the alphabet. 10 00:00:51,290 --> 00:00:58,330 And, in the HREF, we have a hash symbol with a lower case letter 11 00:00:58,330 --> 00:01:05,960 and if we scroll further down the page, we see that there's a DIV with the letter A 12 00:01:05,960 --> 00:01:12,420 and if we scroll down all the way, we have all the letters of the alphabet. 13 00:01:12,420 --> 00:01:22,070 So, the default behavior of HTML is if you specify the ID of elements in an HREF, it jumps to it automatically. 14 00:01:22,070 --> 00:01:30,280 Now, say, we want it to actually smoothly scroll to the particular element on the page. 15 00:01:30,280 --> 00:01:37,340 Well, we need to use some jQuery to do that and is fairly straight forward. 16 00:01:37,340 --> 00:01:41,020 So, let's dive into our app_js file. 17 00:01:41,540 --> 00:01:45,990 So, our app_js file is actually included at the bottom of our index.html 18 00:01:45,990 --> 00:01:50,130 so we don't we need to include any document ready in our JavaScript. 19 00:01:50,560 --> 00:01:53,340 So, we can just start typing our code. 20 00:01:53,340 --> 00:02:05,840 So, let's select each ??? in all the list items and let's do click in an unnamed function in here 21 00:02:05,840 --> 00:02:23,180 and let's just log in our console, the items attribute of HREF. 22 00:02:23,180 --> 00:02:34,000 So, let's click save and go back to chrome and let's refresh 23 00:02:34,000 --> 00:02:39,050 right click and go to inspect element and click on console. 24 00:02:39,050 --> 00:02:43,250 So, now we've got our console open. Let us click on one of these links. 25 00:02:43,250 --> 00:02:53,310 So, as you can see, the HREF attribute has returned and you can see that it's 26 00:02:53,310 --> 00:03:01,810 actually the ID of CSS selector for an ID of HDIV containing all the names. 27 00:03:01,810 --> 00:03:13,600 So, we can use this in our jQuery. Let's jump back into our editor and let's store this as a variable called ID. 28 00:03:18,600 --> 00:03:31,650 And now, let's select the elements by the ID and Maligro in her forum post actually said something about scroll top. 29 00:03:31,650 --> 00:03:38,290 So, let's jump back in the browser and take a look on jQuery.com documentation. 30 00:03:42,290 --> 00:03:51,640 So, let's click on API documentation and let's click the section search for scroll top. 31 00:03:54,640 --> 00:03:58,150 So, the scroll top gets the current vertical position of the scrollbar 32 00:03:58,150 --> 00:04:05,370 but we actually want animate the position of the body in relation to the element. 33 00:04:05,370 --> 00:04:11,650 So, let's click on animate. So, the animate method takes in 4 parameters. 34 00:04:11,650 --> 00:04:18,769 These ones with square brackets here are basically optional but these properties are mandatory. 35 00:04:19,339 --> 00:04:25,680 Now, these properties take a plain object and use the CSS properties and values 36 00:04:25,680 --> 00:04:30,220 that you'd like to animate when we call this method. 37 00:04:30,500 --> 00:04:37,860 So, let's click on command F or control F if you're on windows and search for scroll. 38 00:04:37,860 --> 00:04:48,430 Now, as you can see, scroll top is not an actual CSS style property, but we can use it in our animations with jQuery. 39 00:04:48,430 --> 00:04:59,520 So, that's good. So, we want to call the anime method and we need to figure out where about on the page the DIV is. 40 00:04:59,520 --> 00:05:13,580 So, let's jump back to our code and let's just keep that just dangling there for now 41 00:05:13,580 --> 00:05:25,780 and let's take a look at the animate method and we want to animate both the HTML and body. 42 00:05:25,780 --> 00:05:34,790 This will make sure that no matter what browser that this has been used in, it will animate the scroll effect. 43 00:05:35,280 --> 00:05:46,800 So, let's do animate and we want to set properties and we want to do scrollTop 44 00:05:47,910 --> 00:05:51,740 and we want to say may be something like divPosition. 45 00:05:55,800 --> 00:06:06,070 So, let's do var divPosition is equal to the id and them something. 46 00:06:06,070 --> 00:06:10,780 So, let's take a look at the documentation again 47 00:06:14,780 --> 00:06:23,060 and let's look for something like offset. 48 00:06:26,060 --> 00:06:33,910 Okay--So, we can find out the offset of a particular object to say is it gets the coordinance of the first element, 49 00:06:33,910 --> 00:06:41,650 all set of coordinance of every element in the set of matched elements relative to the document. 50 00:06:41,650 --> 00:06:48,250 So, let's click on this and this what we want to look at. 51 00:06:48,250 --> 00:06:58,910 So, it doesn't take any arguments. You just called offset and let's scroll down here and we can get an offset left and an offset top. 52 00:06:58,910 --> 00:07:14,980 So, let's go back to our code and let's do offset and let's just logout just to make sure what we're doing is right. 53 00:07:14,980 --> 00:07:20,200 console.log divPosition 54 00:07:20,200 --> 00:07:32,430 Click on save, jump back into Chrome, refresh our page, and then let's click on A. 55 00:07:32,430 --> 00:07:45,570 So, A's top is 0 and its left is 0 too. So, let's click on H and H's top is 2026. 56 00:07:45,570 --> 00:07:55,380 So, let's click on I and it should be a little bit more. Yet, is 448. It's 2448 in fact. 57 00:07:56,380 --> 00:08:01,910 So, let's jump back into our code and do offset.top. 58 00:08:01,910 --> 00:08:07,090 So, the divPosition now should be the number of pixels from the top of the document 59 00:08:07,770 --> 00:08:11,870 which is exactly what we want to do to scroll the relative DIV. 60 00:08:11,870 --> 00:08:18,700 So, let's click on save and let's see if it actually scrolls like it should. 61 00:08:20,700 --> 00:08:29,750 Refresh and then click on C and it scrolls to C and let's go to G and it scrolls to G. 62 00:08:29,750 --> 00:08:40,400 Now, you may think that's it. Well, it may not because if you see up here, it actually still changes. 63 00:08:41,400 --> 00:08:50,140 Now, what that means is that the browser is still modifying the URL depending on the click that we do. 64 00:08:50,140 --> 00:08:52,670 So, not all browsers are implemented the same. 65 00:08:52,740 --> 00:08:58,680 So, what could actually happen in other browsers is it may just jump to the M 66 00:08:58,680 --> 00:09:02,250 and then scroll and that isn't what you wanted to do. 67 00:09:02,480 --> 00:09:07,420 You want to prevent the browser from actually doing its default behavior. 68 00:09:07,420 --> 00:09:25,500 So, let's jump back in to sublime text and then pass in an event here and we want to actually event.preventDefault. 69 00:09:25,500 --> 00:09:31,410 So, this prevents the browsers default behavior of following the link. 70 00:09:31,410 --> 00:09:39,190 So, in browsers where it may ignore your behavior first or actually use your behavior first, 71 00:09:39,190 --> 00:09:45,200 by preventing the default behavior like this, you have an assurement that your code will behave the same in all browsers. 72 00:09:45,200 --> 00:09:56,240 So, let's jump back into our browser and then let's delete this m from the end and hit enter 73 00:09:56,240 --> 00:09:58,170 and then, let's click on one of these things here. 74 00:09:58,170 --> 00:10:07,420 So, let's click on I and it scrolls. I think I clicked on J. Let's click on. Yup. 75 00:10:07,420 --> 00:10:13,400 K, J, and I again. There we go. 76 00:10:13,400 --> 00:10:21,070 So, this is working as expected and if you've noticed up here, the hash and then the letter isn't appearing. 77 00:10:21,070 --> 00:10:27,130 That's because the browser doesn't follow the link and we've actually implemented how it should work. 78 00:10:28,130 --> 00:10:33,060 So, there you have it. It's a fairly simple solution and you can use it in many scenarios. 79 00:10:33,060 --> 00:10:36,750 Not just on a contact list. You could use it on FAQ page. 80 00:10:36,750 --> 00:10:42,020 It just stops that ??? experience for the user. It scrolls in the ??? is on the page. 81 00:10:42,060 --> 00:10:45,860 Now, if you have any questions, share your code in a forum post 82 00:10:45,860 --> 00:10:50,570 and a student or member of staff will get back to you as soon as possible.