If you have created a website but the content of the website is too long that is uneasy to understand at this situation you can make use of WordPress Smooth Scroll Plugins.
WordPress Smooth scroll plugins will help you all to scroll the website upside and downside very smoothly. It will not only improve your website user experience but will also get a major effect on conversion rate. Because your user will be engaged on your website for a longer time.
How to Add a Smooth Scroll to Top Effect in WordPress using jQuery?
Do you wonder why various other websites have a smooth scroll to the top of the page effect? It is ideal for adding a smooth scroll top effect if you have a long page.
This helps in improving your user’s experience on your page, and at the same time, makes it easier for them to quickly get back to the top.
Now the question is, how do you add a smooth scroll to the top effect in your WordPress site? Well, you can easily do it using jQuery. Here we are going to talk about how you can easily do it use jQuery. Read on:
What is Smooth Scroll, and When to use it?
In case a page or a post is having a lot of content, users are required to scroll down to read them all. As users start scrolling down, your navigation links start going up.
As the user is done reading, they have to scroll to see if anything is left for him/her. Scrolling to the top button allows the reader to go op quickly. You can opt for adding this text link without any need to use jQuery.
<a href="#" title="Back to top">^Top</a>
It is going to send the readers to the top of the page while scrolling up within a fraction of a second. It works as a functional one.
However, the smooth scroll is the opposite of this. The smooth scroll helps the user to slide back to the top area of the page. This helps in improving the experience of users on your site.
Adding Smooth Scroll to Top Effect with jQuery in WordPress?
If you want to add a smooth scroll to the top effect, then you can use jQuery. Simultaneously, you’ll be needing to add some CSS along with a single line for the HTML code on the theme of your WordPress.
To start with it at first you need to open a text editor, such as Notepad. Now you need to create a file and go ahead to save it as smoothscroll.js. Now you need to copy paste a code to the file area:
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() < 200) {
$('#smoothup') .fadeOut();
}
else {
$('#smoothup') .fadeIn();
}
});
$('#smoothup').on('click', function(){
$('html, body').animate({scrollTop:0}, 'fast');
return false;
});
});
Now you need to save the file. After that you can upload it to the WordPress theme directory’s /js /folder. In case your theme is not having a / js/ directory, then you have to start with creating one.
After that you can upload the smoothscroll.js to this directory. This code is referred to as the jQuery script, which is going to add a smooth scrolling effect to the button. It is basically going to help the user to go smoothly to the top of the page.
After that you need to add in this smoothscroll.js to your theme area. If you want to do that you need to add a script in the WordPress. Here is the script or the cod that you need to paste to the functions.php file of your theme:
wp_enqueue_script(‘smooth up’, get_template_directory_uri() . ‘/js/smoothscroll.js’, array(‘jquery’ ), ”, true );
This code sends WordPress the command the script. At the same time, it also tells WordPress to load the jQuery library as the plugin is dependent upon it.
As you are done with adding the jQuery part, now you need to add the actual link to the word press site, which is going to take the user back to the top area. You need to paste an HTML code anywhere in the footer.php file of your theme:
<a href="#top" id="smoothup" title="Back to top"></a>
This step includes the adding of the link to the file but it is not linked with any text. It is so, because you need to use an image icon to the upward arrow which is going to enable you to display a back to top button.
Here’s How you can add a 40x40px icon to the stylesheet of your theme:
#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}
#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}
In the above-mentioned CSS, you have opted for icing the position of the image icon. It also includes the usage of an image icon as the background image. Now you need to upload your image icon with the help of the WordPress media uploader.
Then you can get the image URL that you have to paste as the background URL. As you have added a CSS animation to the button which keeps rotating the button, the user keeps his mouse pointer over the button.
Now you need to scroll to the top effect, which is going to allow the users to go back to the top area and find what else they can do on your website.
You can also add a floating footer back to make the feature contents have an easy display. In case you don’t want your users to scroll to the top area to share the article, you can use the floating social share bar plugin to make it much more manageable.
Smooth scroll plugins of 2020 – very light weighted and fast
WordPress Smooth Scroll Plugins will surely work much faster and effective on all other devices and browsers without any difficulty.
Also, it works awesome with other plugins like Yoast SEO, Contact Form 7, NextGen Gallery, Slider Revolution, WooCommerce, SKT page builders, Visual Composer and Elementor, and many more.
Large scale business or a small scale business websites like Blog, Portfolio website, consultancy website, Corporate Website, eCommerce related website, Creative Agency, Real Estate website, Personal CV, Retail Company website, etc. Can use WordPress Smooth Scroll Plugins to enhance the look and feel of the website.
Many free WordPress Scroll plugins are available but we have highlighted most Smooth scroll plugins that all your visitor will love it. Please check below.
1. Page scroll to id :
The Page scroll to id is open source software that is fully characterized and provided with well-developed features and functionality. It gives you a smooth scrolling animation effect.
Page scroll to id plugin is adjustable. With the help of id and offset mentioned this plugin will calculate the size of the page and set it automatically.
2. Sticky Menu (or Anything!) on Scroll :
The sticky menu(or anything) on scroll plugin is available at free of cost. it helps you to make a menu or any element sticky. Once you click on a sticky element it will directly scroll you to the top of the page. You just required a few or basic knowledge of HTML/CSS to just take out the correct element that you want to make sticky.
3. WordPress Infinite Scroll – Ajax Load More :
Ajax Load more is specially created for a WordPress user so they can smoothly scroll the website. Ajax load more helps to load a lazy posts, single posts, pages, and comment. These plugins are most well known for eCommerce plugins like WooCommerce
4. Easy Smooth Scroll Links:
You can create a bottom to top feature on your own. because SEasy Smooth Scroll Links is a customizable and very light-weighted plugin.
You just need to choose any of the images to set scroll up elements. Also, you can adjust the element position to the left, center, right side. This plugin is also open-source software.
5. MouseWheel Smooth Scroll :
MouseWheel Smooth Scroll plugin is very smooth to scroll for all anchor links. It is usually placed at the right-hand side which will scroll the page from the bottom to the top.
Hence this plugin supports RTL and it does not create useless menu items in the WordPress dashboard.
6. Smooth Scroll by WPOS :
As Smooth Scroll by WPOS plugin is light-weighted so one can easily customize scroll from top to bottom on every page. You don’t need to write even a single line of code.
One can adjust the animation speed, type, height, width, etc. as per their need. This plugin works better with Elementor page builder
7. Simple Scroll to Top Button:
One can add a smooth scroll effect to the anchor link but on the same page. This effects can be applied to the whole posts and page or to particular posts and pages. You can find this setting in the dashboard setting>>Simple Scroll to Top Button.
– Pick to apply for all post and page
– Pick homepage only
– Pick the particular pages only
– Pick the particular posts only
– Decide the speed of the scroll
8. NS Smooth scroll back to top :
The Surbma has more active users. As this plugin is also a smooth scroll. You can get the effect to every anchor link on your website. A smooth scroll effect can be added to the menu or to any navigation part.
You even do not need to customize it because there is no option given for this plugin. If you have knowledge and experience about the JavaScript and WordPress programming you can make some changes as per your need. But if you don’t have I will suggest you do not touch it. as it will start working immediately after installing.
9. WPFront Scroll Top :
You can easily scroll bottom to top using WPFront Scroll Top Plugin. It is fully customizable with different options to choose from. With some animation, it will get scrolled back to the up.
You can create text, images, and buttons on your own. also you can filter pages and posts.
10. Catch Infinite Scroll :
Catch Infinite scroll will help you to increase user engagement on your website. The main reason behind it is a Jetpack infinite scroll. Once your plugins are installed and activated your customer and user will able to scroll the website page.
These all are the top Free WordPress Smooth Scroll Plugins 2019.
The post Best Free WordPress Smooth Scroll Plugins 2021 appeared first on SKT Themes.
0 Commentaires