Make the button Scroll Top in WordPress

When you visit a website and read the information gets to the bottom of the sometimes if we see there is one of the features of the button image upwards arrow of the page of the website, that’s called a scroll top.

Scroll Top WordPress function to make it easier for visitors to return to the top page without manually doing her.

There are various ways to make the button Scroll Top WordPress, that could add a script on our wordpress themes as well as with the use of WordPress plugins. We will discuss one by one

1.How to create a Scroll Top with Code

Your first step to open the file “header.php” located in the wordpress theme being used

Appearance > Editor > Select the theme you use > header.php

Make the button Scroll Top WordPress

Make sure “header.php” file inside there <div id =”header”>, usually by default the code is readily available. If the “header.php” file already exists then you input the code given below in the file footer.php and then save.

<a href=”#header”>Scroll to top</a>

2.How to create a Scroll Top using jQuery

Download the Javascript Script below and then uploaded on cPanel hosting you and place it in the folder “js” of your wordpress theme.

DOWNLOAD Scroll Top jQuery

Next add the script below and copy and paste into the file footer.php

<a id="top" href='#'><i class="icon-up-bold"></i></a> <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script> <script type="text/javascript"> var toper = $('a#top'); $(window).scroll(function(){ if ($(this).scrollTop() > 100) { toper.fadeIn( 200 ); } else { toper.fadeOut( 200 ); } }); toper.click(function(){ $('html, body').animate(, 500); return false; });

The next step was the last how to make scroll top jQuery script add the css code below into the file style.css from your wordpress theme.

a#top { height: 40px; width: 40px; position:fixed; bottom:45px; right:20px; text-indent:-9999px; display:none; background: url("images/scrolltop.png"); -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; } a#top:hover { -webkit-transform: rotate(360deg) ; background: url("images/scrolltop.png") no-repeat; }

To change picture button scroll top you can just change it in this script background: url (“images/scrolltop.png”);

3. Make Button Scroll Top use Plugin

we can create using the help of a wordpress plugin named WPFront Scroll Top.

The features of WPFront Scroll Top wordpress plugins include:

  • Button scroll top be replaced according to taste
  • Auto Hide
  • Display Navigation buttons if the visitor scroll down the page
  • Manufacture of buttons can be text, images, and animation
  • Post/Page filters

First we download the plugin first WPFront Scroll Top here , then install the plugin. Plugins > Add New > Upload Plugin > Choose File > Install Now

Make the button Scroll Top WordPress

Once completed install go into the settings of the plugin WPFront Scroll Top and then tick the Enabled Like the image below:

Make the button Scroll Top WordPress

Make the button Scroll Top WordPress

For other arrangements please do according to your needs.

Last Updated on Maret 30, 2017 by tonjoostudio.com

Bagikan ke:
tonjoostudio.com
Ditulis oleh

tonjoostudio.com

Tonjoo is a dedicated WordPress development agency with over 10 years of experience developing WordPress websites, plug-ins & themes for a global client base. Tonjoo’s WordPress plug-ins has been downloaded over 100,000+ times. Tonjoo’s client base includes Indonesian government agencies, SME businesses & an extended list of global businesses. At Tonjoo we are a team of passionate WordPress developers, project managers and strategists based in Jakarta & Jogja (Indonesia).

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.