SMOOTHSCROLL BACK TO TOP JAVASCRIPT HOW TO
SMOOTHSCROLL BACK TO TOP JAVASCRIPT INSTALL
SMOOTHSCROLL BACK TO TOP JAVASCRIPT CODE

Nowadays every blog and websites have a sperate button for going back to the top of the webpage. You can also find us on Twitter and Facebook.How to create a button on the webpage to go back top? Solution: JavaScript Scroll To Top Feature, HTML CSS JavaScript Go To Top button. If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials.

SMOOTHSCROLL BACK TO TOP JAVASCRIPT HOW TO

You may also want to see our expert pick of the best WordPress plugins for small business and our step by step guide on how to start an online store. We hope this article helped you add a smooth scroll to top effect on your site using jQuery. You can upload your own image icon using the WordPress media uploader, copy the image URL, and then paste it into the code. In the CSS above, make sure that you replace with the image URL you want to use. moz-transition-duration: 0.4s transition-duration: 0.4s

SMOOTHSCROLL BACK TO TOP JAVASCRIPT CODE

Instead, you can use a plugin like WPCode and follow our tutorial on how to add custom code snippets in WordPress. We don’t recommend directly editing the theme files because the slightest mistake can break your site. To do that, we will enqueue the script in WordPress.Īfter that, simply copy and paste this code to your theme’s functions.php file. The next thing you need to do is to load the smoothscroll.js file in your theme. 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.

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 BACK TO TOP JAVASCRIPT 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.

Smoothscroll back to top javascript