Landing Page With Smooth Scroll - 3 Options

[Music] this video is sponsored by the ultimate freelancing bundle by study web development comm which gives you everything you need to start your own freelancing business including 130 page in-depth guide invoicing and client proposal templates website templates an SEO checklist and much more visit the link in the description and use the code brad 25 to get 25% off hey what's going on guys so in this video I want to show you how to implement smooth scrolling on a landing page and what I mean by that is we have a nav bar here and if I click one of these such as a boat it'll take me down to the About section and it'll have a nice smooth scroll effect okay so I'm sure you've seen this on many many websites and applications now I'm going to show you three different ways to do it the first way I want to focus on is pure CSS no JavaScript at all and that's by using the scroll behavior property which this is the mdn docks and shows you an example so basically this is just Auto but if we set it to smooth it will give us that nice smooth scroll effect now there's some other properties I want to show you as well one of them being a snap effect which is scroll snap type and what that does is if I take the scrollbar and I go like let's say right here and I let go you'll see that it snaps into place whatever one is is more in the viewport is the one that it's going to snap to so that's pretty cool as well and then we also can control it with the arrow keys I can go up and down with the arrow keys so this is fantastic the only thing is browser compatibility so if I go to can I use calm and we type in scroll - behavior you'll see that it's it's in Firefox Chrome and opera but it's not yet implemented in Safari edge and Internet Explorer so that of course is the down side now even if you were to just use this this method in let's say Safari let me just go to Safari real quick and we'll visit that same page now the smooth scrolling isn't going to work but it still gives you the functionality of taking you to that area so it's not like your site's gonna break if you were to use this CSS property now I am going to show you two other methods that are completely cross compatible with all browsers one is using jQuery and a better solution than that is to use a very lightweight script called smooth scroll now you could do this with vanilla JavaScript but it's it's a lot of code to do something so simple you have to write your own ease function and so on some other options are to use a framework if you're using like bootstrap or some other CSS framework many of those have JavaScript widgets that will allow you to do this as well and then there's there's plenty of other scripts but I think that smooth scroll is one of the best it's one of the easiest and one of the lightest so let's go ahead and get started now I'm gonna actually create this this landing page from scratch which shouldn't take too long it'll take about ten minutes or so I'm gonna do all the HTML and CSS so if you don't want to do that or watch that I'm gonna put a timestamp right down below and you can skip that and go right to you know adding the smooth scroll feature okay so let's get started I'm gonna jump into vs code I just have an index.html style.css and a main dot jas ok then they're all completely empty and the reason I want to do this from scratch as most of my the stuff that I do is because I want you guys to learn other stuff as well like for instance we'll be using flexbox so if you're not that comfortable with flexbox you can see how it's implemented and and learn other stuff that that you know isn't the main focus of the video so let's get started I'm just gonna use Emmet here I'm gonna do exclamation enter and that will give us a boilerplate and let's just change the title to I'll say smooth scroll landing page all right and then we're gonna bring in our CSS so let's add a link tag to style dot CSS so the HTML is pretty simple we're gonna have a container okay that's going to wrap everything we're going to have a navbar so I'm gonna use the html5 nav tag here and give it a class of nav R I'm using M it and let's do a ul let's do an list item with a link which is going to go to hash home okay and then we're gonna copy this down a couple times for links and let's do a boats boats and this will be service and of course you can change these if you want and contact contact alright so under the nav we're gonna have our sections are for sections which are going to correspond to these IDs so let's do section with the ID of home and we're gonna do an h1 we'll just say welcome to my site and let's do a paragraph and in here I'm just gonna do lorem 15 and that will give me 15 words of dummy text okay then we'll go ahead and just copy this down we need four of them second one's gonna be a boat we'll change the title as well to about and see this one's gonna be service oops so service and then this one is gonna be contact okay and that's it that's the HTML so I'll save that and I'm gonna go ahead and open this up I'm using live server which is an extension for vs code and there it is so very ugly no CSS at all so let's jump into style dot CSS and like I said I'm gonna implement the the whole slew scroll thing after we get the site you know the the main styles so let's go start off with a reset here so I'm going to set everything to have a margin of zero and a padding of zero and then let's style the body so we're gonna do font family I'm going to use arial helvetica sans-serif as my font stack and I'm gonna set the background to a dark gray and let's set the color to white alright and I'll set the line height let's do line height one point six and I'm gonna set the height of the body to a hundred viewport Heights okay so this is gonna this is going to matter when we're using the scroll behavior now we're also going to want to remove the scroll bars from the body completely and then we're going to put the scroll back on the y-axis on the container but we're going to do that afterwards so I'll just leave that as it is for now now for the container I'm going to set the width and height to a hundred percent okay so it takes up the whole body and then this is where the CSS a smooth scroll properties will go okay so I'll put those in after now the next thing I'm gonna style is the navbar so we have a class of nav bar and we want to position it fixed because we always want it to be at the top otherwise smooth scrolling is kind of pointless so we want to at the top zero position I'm gonna set the z-index to one so that it's always on top of the rest of the content I'm also going to display it as flex so the UL inside will be a flex item and then let's set the width to be 100 percent let's set the height to 60 pixels and for the background I want it to be somewhat transparent so I'm going to use RGB a red green blue alpha so I want it black so zero zero zero excuse me for red green blue and then for the Alpha value let's do 0.7 so that'll give it a little bit of transparency okay so now let's do the elements inside the navbar we'll go ahead and do the UL so let's say now bar ul and let's display that as a flex box so that the inner list items are flex items that we can align and stuff like that so let's say list style we want to remove any bullets so set that to none we're also gonna set the width to a hundred percent and let's justify content to the center okay we want the that didn't Ave items to be in the center or the whole UL to be in the center so if we take a look you'll see we have our bar and it has some transparency and we have all of our list items we have our UL in the middle so now let's do the list items themselves so navbar ul Li and I'm just going to separate them bit so I'm going to add margin:0 on the top and bottom one rim on the left and right and then padding I'm just gonna do one room all around okay and then for the links say navbar ul Li a so for the links I'm going to remove the underline so we want text-decoration:none let's make them uppercase so text transform uppercase and then the color I'm just gonna make very light gray almost white okay and then a last thing I want to do with the nav bar is the hover State so we'll add hover and I'm gonna set the color to sky-blue all right so we'll save that check it out and there's our nav bar so now we want to move on to these sections which should take up the whole viewport for each section so let's start off just styling section we're also gonna want section h1 and I probably should have used sass section P the reason I don't use SAS a lot in in like landing page tutorials and stuff is because I know some people are just getting into CSS so I don't want to confuse them but there's a lot of cases where I would use sass if it were you know by my project in production so the paragraph inside a section I'm going to set the font size to 1.5 REM the h1 I'm gonna set to 4 REM ok so now let's style each section there going to be flex boxes however we don't want rows because we don't want the h1 and then the paragraph to be aligned next to it we want them on top of each other so we're gonna set the Flex direction to call them instead of Rho which is the default all right and then we want everything in the center so we want two line items to the center we want to justify content to the center so that will allow align both horizontal and vertically vertically to the center and then the text itself I'm also going to align to the center all right then we want a width of a hundred percent and a height of 100 VH viewport Heights okay no matter how the browser is sized there's always 100 viewport Heights and we want to take up all of them okay so we want it to fill the page let's see so the last thing we want to do actually let's check this out so we'll save it and this is this is what it looks like so each section takes up a hundred viewport Heights which is the whole viewport and if I click a navigation linked here it will go to that section okay but we just don't have the smooth scroll yet so let's add the background images because you can't really tell each section apart so what I'm going to do is just copy and paste this in because it's very simple all we're doing is taking each ID and setting a background URL now I have the code in the description I put it inside of a code pen with these exact images so you can grab the links from there if you want so we're just setting no-repeat putting them in the center and covering that whole space okay so we just have our home about service and contact so if I save this and we check it out now we have our background images all right so now that we have all that stuff done let's jump in and let's add the smooth scrolling so first thing I'm going to do is on the body I'm actually going to remove the scroll bars altogether so I'm gonna set overflow to hidden if I'd if I save and I go back notice there's no scroll bars I can't I can't use my scroll button what we want to do is go to the container and we want to set overflow on the y-axis which is up-and-down which is vertical and we want to set that to be able to scroll okay so I saved that now we have our scroll bars okay and inside here I'm going to add the scroll - behavior property and I want to set that to smooth okay now just doing that if I go back and I hit about service you see that now it works so it's as simple as that to implement the smooth scroll but of course it's not completely cross browser platter compatible now we don't have that effect the snap effect right away like if I go right here it'll actually stop here I want to get that snap effect so there's two things we need to do one is add the property of scroll snap type and set that to Y because we're dealing with the y-axis you can also do this horizontally and then set mandatory okay you have mandatory in your proximity mandatory is what we want because you want it to mandatory snap to that section now just doing that isn't going to work we have to add one more thing to the section one more property which is going to be scroll snap a line and we want to align Center okay so now just doing that if I go back let's just reload this and now if I take the scroll bar and I move it here and I let go it's going to go into whatever one is further in the viewport okay same thing if I use my scroll wheel so I'm gonna scroll up and let go and it goes right back down into place if I pass that that threshold it'll go to the next one up so I really like this I do I hope that it gets put in all browsers fairly soon so with that done let's move on to another solution so I'm going to show you how to do this using jQuery so I'm going to disable what we just did with with CSS so one thing I'll do is comment out the overflow:hidden in the body I'm gonna comment out these three right here and I guess we'll leave this the snap we can leave that that's fine but if I save this it's no longer gonna work so if I go about service that stuff doesn't work the snap doesn't work okay so we're back at square one so let's implement jQuery so I'm gonna grab the jQuery CDN and one thing I want to mention is you don't want to use the slim version because we're using the animate method and the slim version that I'm pretty sure doesn't have the anime method so we're gonna grab the minified version so I'll copy that link to the CDN we'll go to our index page and right above the body let's put in a script source and paste that in and then I just want to add a script source to our main j/s alright so this is going to take about 15 lines of code or so so I'm gonna put a comment here and I'll say option two you'll say J query smooth scroll so we want to grab the links in the nav bar so let's put in jQuery we want to grab class navbar a alright we want to add an event so we're gonna say on click okay now this is gonna take in take a call back so we'll put a comma here with a callback function which takes in an event parameter so inside here we want to test to see if there's a hash meaning that you know the hash home hash about whatever actually you know what we'll do is do a console log of this dot hash and we'll save it and then if we go back to a project and open up our chrome tools and go to the console and I hit about you'll see that we get that hash value so back in vs code we want to we want to test for that we want to see if that exists so we're gonna say if this dot hash is not equal to nothing okay so if it's not equal to an empty string then we want to prevent the default behavior so e dot prevent default and then I'm gonna put that hash value into a variable alright and then what we want to do is target the body so we're going to put in here HTML let's do HTML body and we want to call the anim method ok so dot animate and inside anim it's going to take an object and one of the properties we can add is scroll top okay so we want to scroll from the top and we're gonna take the hash value and we want to call the offset method and then say dot top okay so it's going to scroll down from the top now the second parameter after this object is the speed that you want to scroll so I'm going to say 800 which is 800 milliseconds again that's it that's all we have to do so we'll save that and let's go back close that up and now if I hit a bow you'll see we get our smooth scroll okay so pretty simple now we obviously don't have the snap effect also if I hit the down up and down it doesn't go to each section like it would with the CSS so we don't have that either but it is cross-platform I'll go ahead and open it in in what is it Safari if I can find it so paste that in and you can see that now it works okay so that works in Safari as well so another solution is to use smooth scroll so I'm just going to search for smooth scroll it's the first github link here and it's pretty popular it has over 4,000 stars and to use it we just need to include the CDN so we have a bunch of options here this will always give you the latest version I'm going to just grab the specific version here which is the latest which is right now as 14.0 and I'm just gonna comment out excuse me I'm gonna comment out all the jQuery stuff including the CDN right here and I'm gonna pay I'm gonna put in script source and paste in the smooth scroll we'll actually already have the script tag just paste that and alright and then as far as the JavaScript if we look at the documentation all we have to do is this we just have to set a variable to smooth a new smooth scroll instance and then pass in this a tag or whatever the the selector we want to use so I'm actually just going to copy that and let's say option 3 smooth Scrolls script and we'll go ahead and paste that in I'm just going to change this to conch though and we can also put in a second parameter of options and we can set the speed if we want which I'll set to 800 and then for this this will work on any link so I'm just gonna add in the class of nav bar in front of this so let's save that and now we should get the same effect so if I go to about Scrolls down good alright so that's gonna be it guys I will put the put a link in the description to the code pen which will have all of all three solutions in it so if you want to use any of those or if you want to look for a different one it's just a really nice effect to have if you're gonna have a single page you know a single landing page alright so please like this video if you liked it and I will see you next time hey guys one of the best if not the best resource I can refer you to for starting a freelance business is at study web development comm slash freelancing the Creator Kyle shared it with me and I can personally vouch that this bundle is well worth it you get 130 page guide to freelancing and it comes with things like invoice templates client proposals HTML and CSS templates a portfolio website access to a private Facebook community and much more so use the code Brad 25 to get 25% off today

Channel: Traversy Media

Views: 213,466

Keywords: html css, smooth scrolling, css smooth scroll, jquery, html, css

Id: y9nlfqT4s9s

Length: 22min 43sec (1363 seconds)

Published: Fri Mar 08 2019