“To top” button on your WordPress page
For sure you saw “to top” button on webpages while surfing in Internet. When pressed this button moves you from bottom to the top of the page.
In this post will be described how to implement such functionality, if this button is needed, but is not build in on your WordPress page. We will look at this functionality using
tiki.lv page for example.
“To top” button is simple – it is only <a> type link.
In order to implement it you should ass this rows to your page code:
[code language=”php”]
…
…
[/code]
Add this row in the right place of your footer.php file and actually “to top” button will work already. In order to display created link as the button, some additional .css styles should be added:
[code language=”css”]
#footer a.anchor {
position: absolute;
right: 15px;
top: -2px;
width: 20px;
height: 20px;
background: url(‘http://www.tiki.lv/wp-content/uploads/footer_anchor.png’) 0 0 no-repeat;
display: block;
text-decoration: none;
}
[/code]
When done this, “to top” button will be ready and will works. Just one more thing, you will see, that movement to the top of webpage occur in moment, but what if we would like to make it slowly and smoothly?
We should use some javascript to achieve that:
[code language=”javascript”]
var timeOut;
function scrollToTop() {
if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
window.scrollBy(0,-40);
timeOut=setTimeout(‘scrollToTop()’,20);
}
else clearTimeout(timeOut);
}
[/code]
We need to save this script in child theme in “js” folder for example with “top.js” name. When done, we can initialize that from functions.php file:
[code language=”php”]
if(!function_exists(“mate_scripts”)) {
function mate_scripts() {
if( is_admin() )
return;
$template_url = get_template_directory_uri(); // if theme is used
$child_theme_url = get_stylesheet_directory_uri(); // if child theme is used
wp_register_script( ‘1.7.1’, $script_directory. ‘/js/jquery-1.7.1.js’, ‘jquery’);
wp_register_script( ‘top’, $script_directory. ‘/js/top.js’, ‘jquery’);
wp_enqueue_script(‘1.7.1’);
wp_enqueue_script(‘top’);
} }
add_action(‘init’, ‘mate_scripts’);
[/code]
Jquery library is needed for script operation, so we should initialize it as well.
When done, we should edit link source code to this one:
[code language=”php”]
…
…
[/code]
And now we will see the result, movement “to top” will be slow and smooth.
If you want to slower down or make movement to top faster try to play with timeOut parameter in top.js script.
Leave a Reply
Want to join the discussion?Feel free to contribute!