Scroll Speed sets the speed of the scrolling effect in general. Step sets the speed at which the speed of the effect is applied when using a mouse wheel. Smooth Scroll has two main options which are Step and Scroll Speed. This is where you will adjust any options for the plugin and input your data as needed. Selecting the enable checkbox will bring up the Settings meta box below. This is useful as a quick way to toggle activity if you ever need without having to go through the Plugins menu and worry about activating/deactivating it completely. You will then see the status change to Installed and Activated.Īfter installing and activating Smooth Scroll, you'll find it's settings under the X menu item if X is installed and activated, or the Pro menu item if Pro is installed and activated.įrom the main Smooth Scroll settings screen you can choose to disable or enable the plugin as needed:ĭisabling the plugin will effectively turn off all output from the plugin (e.g. Click that button and it will activate the plugin. ![]() Once installed, the Install button will change and say Activate. Go to Pro > Validation or X > Validation for then look for Smooth Scroll. Perfect if your site uses a lot of Parallax images to provide your users with a smoother scrolling experience. To see some other cool uses of jQuery in WordPress you can look at our jQuery FAQ accordion article or the lazy loading images article.ĭo you think that scroll to top effect are useful? Let us know by leaving a comment below.Smooth Scroll allows you to control the scrolling experience of your users with mouse wheels. We hope this article helped you add a smooth scroll to the top of page effect on your site using jQuery. If you don’t want your users to scroll to top to share your article, then we highly recommend that you use the floating social share bar plugin like we have on WPBeginner. Another thing you can do is add a floating footer bar like we have on our site to display featured content. Scroll to top effect allows users to go back to the top and find other things to do on your website. We have also added a little CSS animation to the button which rotates the button when a user takes their mouse over it. You can upload your image icon using WordPress media uploader and then get the image url to paste it as background url. In the CSS above, we have used fixed position for our image icon and used an image icon as the background image. moz-transition-duration: 0.4s transition-duration: 0.4s In this example we are using a 40x40px icon. ![]() That’s because we will be using an image icon with upward arrow to display a back to top button. Copy and paste this code in the file:Īs you noticed that we have added a link but have not linked it to any text. Create a file and save it as smoothscroll.js. To add a smooth scroll to top effect, we will be using jQuery, some CSS and a single line of HTML code in your WordPress theme. Adding Smooth Scroll to Top Effect with jQuery in WordPress This creates a nice effect and improves the user experience. It smoothly slides user back to the top of page. It is functional, but kind of like a bump on the road. It just sends users to the top of the page and scrolls up the entire page in milliseconds. You can add this as a text link without using jQuery, like this: Scroll to top button quickly sends users to the top of the page. When users are done reading that article they need to scroll up to see what else to do on your website. As users scroll down, all your navigational links go up. When a page or post has a lot of content users are forced to scroll down to read those contents. What is Smooth Scroll and When to use it? ![]() For those who want to learn how to do this without a plugin, then please continue on reading. If you want to use a plugin method, then please use smooth page scroll to top plugin. Note: This tutorial is created for a DIY intermediate user who is comfortable editing their themes. In this article, we will show you how to add a smooth scroll to top effect in WordPress using jQuery. Recently one of our readers asked us about adding a smooth scroll to top effect in WordPress. Have you seen websites that add an smooth scroll to top of page effect? This is great when you have a long page, and you want to give your users an easy way to get back to the top.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |