This code is the jQuery script that will add a smooth scroll effect to a button that takes users to the top of the page. You can also see our guide on the WordPress files and directory structure for more information. If your theme does not have a /js/ directory, then you can create one and upload smoothscroll.js to it.
#Smoothscroll how to#
For more details, please see our guide on how to use FTP to upload files to WordPress. $('html, body').animate(, 'fast') Īfter that, you can save the file and upload it to the /js/ folder in your WordPress theme directory. Next, you will need to copy and paste this code into the file: We will be using jQuery, some CSS, and a single line of HTML code in your WordPress theme to add the smooth scroll top effect.įirst, open a text editor like Notepad and create a file. It is suitable for people who are comfortable editing themes because it includes adding code to your website. This method is not recommended for beginners. Adding Smooth Scroll to Top Effect with jQuery in WordPress You can now visit your website to see the scroll-to-top button in action.
When you’re done, simply click the ‘Save Changes’ button. If you can’t find a pre-built image button that works for you, then there is an option to upload a custom image from the WordPress media library. You should be able to easily find a design that matches your site. The plugin also offers pre-built button designs you can choose from. However, you can navigate to the ‘Display on Pages’ section and choose where you’d like to display the scrolling to the top effect. Normally, it will appear on all the pages on your WordPress blog. The WPFront Scroll Top plugin also offers filters to show the scroll-to-top button only on selected pages. It will appear in the bottom right corner of the screen by default, but you can choose to move it to any of the other corners, too. There’s also an option to change the location of the button. By default, it will scroll to the top of the page, but you can change it to scroll to a particular element in the post or even link to a page. You can also edit what the button does when you click it. If you scroll down, you’ll find more options like editing the auto-hide time, enabling the option to hide the button on small devices, and hiding it on the wp-admin screen. Next, you’ll see options to edit the scroll offset, button size, opacity, fade duration, scroll duration, and more. Here you can configure the plugin and customize the smooth scroll effect.įirst, you’ll need to click the ‘Enabled’ checkbox to activate the scroll-to-top button on your site. Upon activation, you can go to Settings » Scroll Top from your WordPress dashboard.
#Smoothscroll install#
If you need help, then please see our guide on how to install a WordPress plugin. The first thing you’ll need to do is install and activate the WPFront Scroll Top plugin. This method is recommended for beginners, since you can add a scroll-to-top effect to a WordPress website without touching a single line of code. How to Add a Smooth Scroll-to-Top Effect Using a WordPress Plugin That said, let’s see how you can add a smooth scroll to top effect using a WordPress plugin and jQuery. Using elements like this can drastically improve the user experience on your site. It will slide the user back to the top with a visually pleasing effect. It works, but the effect can be jarring, kind of like when you hit a bump in the road. That will send users to the top by scrolling up the entire page in milliseconds.
0 kommentar(er)
