Right now, you should be at the functions.php editor page, scroll to the end of the editor.

paste the following code at the end of the editor.

1. Creating link

add_action( 'wp_footer', 'back_to_top' );function back_to_top() {    echo '<a id="totop" href="#">Back to Top</a>';}

2. Adding link style

add_action( 'wp_head', 'back_to_top_style' );function back_to_top_style() {    echo '<style type="text/css">        #totop {            position: fixed;            right: 30px;            bottom: 30px;            display: none;            outline: none;        }    </style>';}

3. Adding scrolling effect

add_action( 'wp_footer', 'back_to_top_script' );function back_to_top_script() {    echo '<script type="text/javascript">        jQuery(document).ready(function($){            $(window).scroll(function () {                if ( $(this).scrollTop() > 400 )                    $("#totop").fadeIn();                else                    $("#totop").fadeOut();            });             $("#totop").click(function () {                $("body,html").animate({ scrollTop: 0 }, 800 );                return false;            });        });    </script>';}

Once you have done so, update file and your site will be updated with the function!



Join the Discussion
Write something…
Recent messages
krazykat Premium
Great to know.
Thanks.
Reply
kiliwia62 Premium
What a great tutorial!!

I certainly will bookmark it and will try it out on one of my sites. Would be glad to get rid of one plugin, when it can be done the way you are showing.

Thank you
Sylvia
Reply
Harrysastar2 Premium
Thanks, bookmarked.
Reply
rosieM Premium
This is great! Trying it out son as I get in tonight!
Reply
PIOFJR Premium
Thanks for the great training! Sometimes it is so scary for me to do something about editing code. I might delete some important code and then don't know how to justify and putting it back. It needs a careful consideration for me to test this out. I bookmarked though.
Reply
TashiDeleh Premium
haha it certainly is not that scary as it seem, it is just adding additional code at the very end of editor and we wont be editing or deleting the original code.
Reply
Top