One Page WordPress Smooth Scrolling Menu – How to Use Page Scroll to ID Plugin 2017

One Page WordPress Smooth Scrolling Menu – How to Use Page Scroll to ID Plugin 2017


Greetings WordPress-ers, in today’s show we are going to set up a one-page smooth scrolling website in WordPress Jackson here welcome to the channel this is where i share tips tricks and tutorials or about WordPress and if that is your thing please do go ahead and consider subscribing if you’re new here and definitely check out the description below it’s got all the information about all the stuff that we’re going to be talking about today at last the show notes and it’s also got a link to download a list of my all-time favorite plug-ins for WordPress, a top 10, but anyway on with the show one-page smooth scrolling you know the stuff it’s good when you click a link at the top navigation it smoothly scrolls down to the place you want to be super slick especially for one page sites, and it couldn’t be easier than with plugin that is free to use off the wordpress repository, a plugin called page scroll to ID, it’s killer it sets up in a few seconds and it’s almost immediately ready to use as soon as you activate it, so let’s get on with the tutorial smooth one page scrolling navigation in WordPress with the Page Scroll to ID Plugin OK, so let’s make a one-page scrolling website, so here we have a standard website demo template site made with the Cento Theme, and we’ve got three pages: home about and contact and what we’re going to do is put all of these onto the single-page the homepage and have a nice little scrolling action when we click the links to take it to the various parts of the page, so let’s go and install the plug-in, we’re going to go to plugins add new and grab the text that we need the name of our plug-in is Page Scroll To ID fine fine plugin that install that now and activate it and once it’s activated you see you got a link here on the plugins page to the setting that’s just under the settings page scroll to ID and to be honest there’s actually a ton of settings to muck around with but to be fair all the settings are perfect straight out-of-the-box so we’re just going to leave that open and go to our pages and open them in a new tab and go to our homepage where we’ve got this text for our welcome text there is on the front end just some lorem ipsum, and we’re going to put in a couple more sections so we’re going to copy this and turn that into “about” and paste it in again and turn that into.. give that another carriage return, turn that into contact so we’ll update that and take a look on the front end we’ve got our three sections of page now okay so the next thing we want to do on the home page itself is put in our little links that will tell our menu the menu we haven’t created yet where to go when you click it and it couldn’t be easier because Page Scroll to ID plug-in actually gives you a little icon that allows you to set an ID target for your page, so what you want to do is put your cursor next to where you want that to be click the insert page scroll to ID target and then you just type in a name for your target ID will say that say about and that one will do the same with I we’ll call that “contact” and then we’ll just make this the “welcome” OK cool, so now we’ve done that we’ll just save that up you won’t see the shortcut on the front end let me show you here we’ve got our new page and there’s our different sections go back to the Settings tab and we’re going to grab the little bit code here this is required on the menu that were about to create so we’ve copied that we’re going to go to appearance menus and we’re going to right click and open a new tab and here is our main menu currently now we’re going to create a new menu ands we’re going to call it “main scroll” create that menu, and we need to add some items do not need a custom links and you see we’ve got the option here for custom links and that the URL will be our ID that we just put onto our page so we put a hashtag and we put in “welcome” and the link text is home so we’ll keep the home text the same, we’ll add that to the menu the next one will be about and we’ll add that the menu and the last one is “contact” and we’ll add that to the menu. So we’ve got three links now and let’s go take a look at the front and will refresh that, oh hang on, we need to change this to the primary menu so that it showed in that many position of whatever theme you’re using now we refresh that front page and try these links out now you see it is jumps it’s just jumps there that’s because we need that little bit of code remember that little bit of code that we copied, now where the code goes is not visible by default on WordPress you need to open up your screen options on your menu and show the CSS classes and then you see you get this box, so we’re going to paste-in our little bit of code from Scroll to ID on all of them and save that menu and now refresh the front page / the homepage let’s get to the top we do in fact get a nicely scrolling page, lets use the defaults scroll up thats in this theme, Cento Theme, scroll down to the contact amazing beautifully scrolling one-page website with the Page Scroll to ID plug-in, now what would be even nicer would be the menu that you see here at the top to stay sticky so when you scroll down the menu pops down so that you could use it for the navigation through a longer page and that tutorial is coming up right after this one. So they go a beautiful piece of kit there this Page Scroll to ID plugin and don’t forget to the next tutorial the link to it there is all about how to put in a sticky menu like i mentioned in the tutorial, but what is your experience with strolling websites do you have any Themes or Plugins that you use specifically for that type of thing please go ahead and get some comments down below and if you like what you’ve seen please please do go ahead and consider subscribing but until next time…. I’ll see you later

100 thoughts on “One Page WordPress Smooth Scrolling Menu – How to Use Page Scroll to ID Plugin 2017”

  1. Hey Jackson, great tutorial but not exactly what I was looking for. Can you tell me if there is a way to set up an automatic scrolling feature on my WordPress site that has a delayed start when the page is chosen, and then scrolls down to the point that I choose on the page after the delay of my choosing? I would want the feature to work when the url is entered into a browser and loads the Home page and when any link to load a new page on the site is clicked…

  2. Out of the dozens of videos i have watched, this was by far the most helpful and easiest to follow. Thank you so much!

  3. What if I only want 1 page on the website to have this sort of scrolling menu ? A kind of website within a website…

  4. In a battle of clicks , every one wants the first place. Everyone wants to be the Top leader page in the search engines. Yoast Seo can help you hope that very liked place. Favorite tool by many because it really helps, since 2008. http://topepicgames.com/

  5. I followed step by step and my site isn't working. Maybe its because Im unsure how to plug in a link that has spaces in the tab. EX: "Mobile Gaming" – What you taught was one work tabs EX: About , Home, Contact. What should a person do if the tab is more than one word, like a "Contact Us" section or so?

  6. thank you this video was very helpful jackson. i am facing a small issue. page scroll to ID works perfectly with the menus. but when i use it on the pag to page ancor its not scrolling smoothly… it suddenly jumps like you showed in the video
    please help

  7. Hi Sir, I have a drop down menu which is too long, the bottom option in my main menu doesn't show all sub menus and it is very irritating, can you please help me with proper plugin to do it

  8. Hi! I used the Elementor plugin to create my homepage. Can I still use this plugin? I don't see how :/

  9. Thanks Jackson! I have a problem in my page it covers the Headings when scrolling my site is http://mindtrix.co.za/conceptualtravel/

  10. HiJackson. Very helpful video, thank you. What happens if one were using the Unyson Visual Editor to build the Home Page. Because the page is configured in sections/boxes, I'm not sure where to place the codes etc using the Plugin. Appreciate your help, thanks.

  11. I wanted to add that I am using the Jevelin wordpress theme and modifying the Home Basic demo content for my Home page, using the Unyson Visual Editor.

  12. I stumbled upon your videos yesterday and they're already the most helpful WordPress tutorials I have EVER seen on YouTube. Great job!

  13. Thanks for tutorial JAKSON!!!
    Hola hay veces que no anda el efecto, para eso coloquen en el campo "selector" en los ajustes del plugins esta linea: a[href*='#'] (borren la otra)
    Hello, there are times that the effect does not go, for that place in the field "selector" in the settings of the plugins this: a [href * = '#'] (delete the other one)

  14. Hi Jackson. It's a great tutorial.
    I work in my page with a theme: Bridge, I added a new section in an existing page, but its scroll don't work, for one section it jump, and in the other one the scroll is below the title, I don't know what I can do. Any suggestion? I added the anchor and the id, but it doesn't work. Could you help me??

  15. I immediately subscribed you after this. You were very easy to follow, and kept it short and sweet. I can't wait to watch more of your videos!

  16. Hi Jackson. I wish to have a scroll effect in which a single scroll would link to the anchor name in the page instead of gradual scroll over the page. Please help me on this. Thanks in advance

  17. ¡ayuda! Ya tengo el menú hecho, creo una página de galería pero el problema es que no puedo vincularlo a los demás.

  18. Excellent video, thank you. I have one question for you, would you create a video tutorial for using jQuery plugins in WordPress for page transitions (ex. https://www.jqueryscript.net/demo/Slice-Page-Transition-Effect-With-jQuery-CSS3-slicescreen/ or https://www.jqueryscript.net/demo/3D-Cube-Page-Transition-Plugin-With-jQuery-cubeTransition-js/) or parallax effect (ex. https://www.jqueryscript.net/demo/jQuery-Fullscreen-Vertical-Slider-with-Parallax-Effect/). Thank you again

  19. Hello
    nice tutorial
    Do you know how can add the same smooth scrolling menu to a landing page created with elementor?
    Keep it up!

  20. Hi,

    I design one page template and I am using myStickymenu plugin and Page scroll to id plugin when I am in mobile device and click menu (Custom Link) page go to that specific section but Menu (Custom link) still open. So I want to know when i am in mobile device and I click menu (Custom link) page go to that section and menu need to Collapse (Close). How can i do it ?? Please give me solution.

    Thank you

  21. Hi Jack! I have a page with few images. I want to scroll down to related paragraph or heading when I click on these images. How can I do that? Any help would be deeply appreciated 🙂

  22. Hello, thank you for this video ! i just want to know how can i add this code in a one page theme (with a menu with no scroll), the theme is "Quality". The content of the page (home) doesn't appear in admin dashboard so i can't add the code where i want. How can i do that ? thank you very much for your help !

  23. Hi i want to create mevmanu like this one. show scroll indicator with section on the page
    https://preview.themeforest.net/item/material-cv-resume-vcard/full_screen_preview/13703959?_ga=2.103478912.1417985056.1553494902-1409027408.1553151237

  24. I almost never comment, but this was a real life saver and I thought you might want to hear that you helped out tremendously! I just couldnt figure out how to get it work with the provided documentation for hours. You made everything clear in 5 minutes and now it works. Thank you so much!

  25. I I watched so many videos in Portuguese and could not do it, with you were 3 minutes is done.

    thank you very much.

  26. Hi, I have a question. I would like to make my website a one-page site like you showed in the video, but only for mobile devices. People on smartphones would have a menu that scrolls down to the section, and people on PC would still have a normal menu that browses to the different pages.
    Is there any way I can do that?

  27. Hello, I want to know that despite adding and activating the Plugin, I'm not able to find the "icon" which helps to mark the ID to any element on the page.
    Kindly help me out.

  28. There are some templates that allow you to create sections by having 1 Home page and adding the rest as sub-pages (i.e. create new page and set Home as parent).
    Does this plugin with this as well?

  29. Can anyone tell me how to highlight the selected menu item(custom link) after I click on any item ? Looking forward to the answers..TIA

  30. How can I have a scrolling menu with other static pages? I have a couple of separate pages but when I click on one of the scrolling tabs nothing happens unless I click on Home.

  31. Thanks, But I'm facing a problem, when I click on the menu button then the section is partially hiding under the header section. Can you please help me out?

Leave a Reply

Your email address will not be published. Required fields are marked *