«

»

Print this Post

Animate Return to top using jQuery in Graphene Theme

Graphene Theme puts a Return to top link in the footer. When you click it, you’ll instantly go back to top of the page. But it is too plain. You can see this here. Scroll down to footer and click Return to top. This post shows how to animate Return to Top using jQuery

The scripts I mention here need to be added to child theme of Graphene Theme. So, if you’re not yet using Graphene Child Theme, get it here.

So, here is the jQuery script.

jQuery(document).ready(function($){
 	$(".return-top a").click(function() {
  	$("html, body").animate({ scrollTop: 0 }, 800);
  	return false;
	});
});

The anchor tag for Return to top is placed within return-top class. So, we are telling browser to scroll to top of the page in 800 milliseconds when somebody clicks Return to top link. You can increase or decrease the duration by changing 800 in .animate() function. Larger the value, slower will be the scrolling speed. Note that WordPress loads jQuery in noConflict mode. So, you can’t use the $ shortcut. Instead of $(document).ready(function(), you have to use jQuery(document).ready(function()

You can add this to your site in two ways. First create a file called return-to-top.js inside your child-theme and add the above code to it. Then enqueue the js file.

Note: These are php functions. You need to put them between opening and closing php tags. ie between <?php and ?>. The closing php tag is optional. Omitting it reduced the chances of headers already sent errors. Read more about php tags here.

Add the below code to your child-theme’s functions.php file.

function enqueue_return_to_top_script() {
    if ( ! is_admin() ){
	wp_enqueue_script(
		'return-to-top-script',
		get_stylesheet_directory_uri() . '/return-to-top.js',
		array('jquery')
	);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_return_to_top_script');

Or, hook the script to wp_footer action.

function return_to_top_script() {
?>
<script type="text/javascript">
jQuery(document).ready(function($){
 	$(".return-top a").click(function() {
  	$("html, body").animate({ scrollTop: 0 }, 800);
  	return false;
	});
});
</script>
<?php
}
add_action('wp_footer','return_to_top_script');

You can see the demo of it in this page itself. Click on Return to top link in the footer and feel it yourself!

Have any questions or suggestions? Leave your comments below.

Short Link:

About the author

Prasanna SP

Student | WordPress Dev | Tech Blogger | Interested in GNU/Linux, FOSS, PHP, Drupal, WordPress, Ethical hacking, Photography, Painting, Literature etc..

Permanent link to this article: http://www.prasannasp.net/animate-return-to-top-using-jquery-in-graphene-theme/

4 comments

Skip to comment form

  1. Luko

    Great, I always wanted to do such thing but was to lazy to do it.
    Thanks, this is simple and effective, especially wp_footer hook…
    And just to mentioned if you put the scrollTop value from 0 to 100 it will scroll until 100px from top 🙂

  2. SHivanandana

    Great post Prasanna.. Thank you.

    May I know which version of Graphene theme you are using for this website?

    1. Prasanna SP

      Hi Shivanandana! I’m using the latest version (1.8.2) of Graphene Theme.

      1. Shivanandana

        Thanks for the info. I am telling from the bottom of my heart.. I am really impressed by your website buddy… Please take it as a honest compliment… And thanks for so many creative things…. I regret for not finding this website till this time..
        Bookmarked and referred to friends..

        Thanks!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Please put your code snippet between <code> and </code>. Comment moderation is in use. Please do not submit your comment twice -- it will appear shortly.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close