Full Video Transcript
Hey guys, How’s it Going? My name is Jason, and we’re always listening to your questions. And one that we’ve been receiving a lot lately – I wanted to do a video about. Now, we’re always listening to your questions on Twitter, Facebook, and YouTube but this one came in on the live stream that we do on YouTube on Tuesdays at 11 am Central Standard Time. So that’s a great resource for you guys if you’re looking to ask questions in a live environment, and get an answer right away. This one had to do with Anchor links. Now we’ve done a resource before on how to make anchor links, and if you don’t know what that is – That’s where you have a link on your page that shoots to another area of your page. So we do have the resource on that if you do not know how to do that. How to Make Anchor Links in WordPress
A question that was laid on top of that is “How do we get it to scroll smoothly?” And I’m going to use an example using one of our current clients. Here we have KCM Consulting. They’re a consulting agency that does a lot of different services. And to organize the information we thought it would be best to have a nice breathable, open area that speaks directly to the client that they’re going for, and when they click on “Our Services” it shoots to another area of the home page using an anchor link in which they list out their services and each one of these shoot to a page that’s more built for that particular service as far as Search Engine Optimization. It’s a great idea – this concept works very well for people that have a lot of different services, but this anchor link is kind of a jarring experience like when you click that – look at how it just it shoots right down. And if you’re on the desktop, it may make sense. Your screen might be large enough for you to understand what’s going on, but if you’re on the phone, I want to show you what this looks like.
Let me pull you back here into full screen.
And here I am on KCM Consulting’s website on the phone and it looks great, but when I click “Our Services” it just shoots right down. It’s like a foreign experience. I’m in a completely new area, and for it to scroll more smoothly could be considered a better user experience. And a lot of people are looking for how to do that.
Now if you’ve been looking how to do it, and you’ve found this video, you’ve probably come across something like this. And you’re like – “Woah – wait a second. (laugh) I have to write jQuery?” And that can be a little bit more difficult than what you’re looking for. jQuery will certainly complete this task for you, but not everybody wants to mess with this kind of complexity, and they’re looking for something more simple.
And I have the solution for you.
Turns out there is, in fact, a very good plugin to achieve this task. And you’ll find a lot of different plugins. I mean you can find plugins for anything within WordPress. But a lot of the plugins involving smooth scroll come with unnecessary options. What we really like about this plugin is it’s very lightweight. And we’re all about building things lightweight. So – I mean here even with this theme it’s a custom built theme. We only have, up until before we chose to go with this plugin, we only had two different plugins. Advanced Custom Fields & Gravity Forms because we love Gravity Forms as do many other people. However, we’re also going to add this jQuery Smooth Scroll. It’s very simple, and what’s great about it is – yes, you do need to use jQuery to achieve this task, but that’s all this plugin is doing. It’s not adding in unnecessary WordPress dashboard menus. It’s not adding in all of this code that’s simply unnecessary – all of these options that you’re simply not going to use. You just want your anchor links to scroll smoothly and you don’t want this much – any other complexity added on top of it, and that’s exactly what this plugin is about.
It’s called jQuery Smooth Scroll by Blog Synthesis, and that’s even the way he advertises it. This person – I assume it’s a male, but it could just as easily be a female, they already know that people are looking for something that’s very simple. They even say, “All CSS & Javascript files are compressed to score high in Google page score. This is exactly what we’re looking for, and I’m going to show you how simple it is. We just installed it. It took about two seconds. Let’s hit activate, and I want to show you again what this is like, just so you can see it side-by-side. Let’s look at the experience when you click on it right now – Kind of a jarring jump down, and let’s reactivate with the plugin active, and let’s click the button again and see what changes.
It’s this smooth scroll.
We didn’t need to activate the plugin and go into a menu then figure out all sorts of options. We just activated it. And then the nature way you do anchor links within HTML is already transferred into this smooth scroll functionality which is outstanding. As an added bonus, and you can’t see it because my face is on the side of the screen – Let me go ahead and remove that. As an added bonus you get this nice, beautiful, little arrow to the side. And when you click that it smooth scrolls right back up to the top. And I do want to show you guys – let me go back into full screen. How that just completely improves the experience on the phone.
So let me refresh the website here on the phone, and let me go up here and let me see if you can see that? You can kind of see that. Let me click “Our Services.” Look at the smooth scroll much better experience, and you still have that arrow in the lower right-hand corner very subtle when we click it we’re scrolled right back up to the top.
So this is a very simple solution. Very lightweight. It’s using in the exact same code that you’d have to write yourself in jQuery, and inserting it into your site in a very minimal fashion. Highly recommended.
Hope this answers your questions – if this is what you’re searching for. If you need more help with WordPress go to AskKori.com. We have all kinds of resources here, guys, for all kinds of questions. Just go to our resources area and chances are if you have the question – we’ve been asked it before and we might already have a resource for you.
So please check this out.
Kori just did a video on the new Revolution Slider which if you’ve used the Revolution Slider – it’s a little cryptic at this point. And if you’re looking to go deeper into WordPress we have a couple of different options for you there. We have online classes that you can purchase that will really help you dive deeper. And if you’re local to San Antonio, you can actually come to one of local classes where we’d love to teach you more about WordPress, and answer your questions. So please use this resource – much of it is free, and it’s for you guys.
Other than that – I appreciate you guys coming by to check out this video.
Please subscribe to my YouTube Channel to get more tips on WordPress in the future.
Other than that – Good luck developing WordPress, guys.
