Scroll to Top / Back to Top button at the bottom of page is sometime very essentialmainly if you have long posts. Here on Crunchify,we do have most of Java tutorialsand Bloggingtips and those are very lengthy.
If you are looking for Sticky Scroll To Top button which uses Javascript then follow this Tutorial: //crunchify.me/sticky-scroll-to-top
In this tutorial we will go over steps on how to add simple Scroll to Top button in WordPress footer without any JavaScript loading.
If you have below other questions then you are at right place:
- How to add back to top button without jQuery
- Non floating Scroll to top button
- Scroll to top without any performance impact
- Genesis Framework how to add custom ID attribute?
Lets get started:
Step-1
On Crunchifywe are using Genesis Framework. By default my Eleven40 theme doesnt include any ID attribute into header or body.
So we need toadd ID calledcontent manually using hook genesis_attr_content. Im going to list all custom attribute for Genesis framework in next post.
Step-2
Place below code into your child themes functions.php file.
1 2 3 4 5 6 | add_filter[ 'genesis_attr_content', 'custom_attributes_content' ]; function custom_attributes_content[ $attributes ] { $attributes['id'] = 'content'; return $attributes; } |
This will add custom id="content" attribute into HTML body. Take a look at below screenshot.
Step-3
Now we need to place arrow element [] into footer. Add below code into your custom footer section of your functions.php file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // Customize the entire footer remove_action[ 'genesis_footer', 'genesis_do_footer' ]; add_action[ 'genesis_footer', 'custom_footer' ]; function custom_footer[] { ?> © 2012-16 Crunchify.com. • All Rights Reserved. Chủ Đề |