{"id":38076,"date":"2022-04-18T11:18:00","date_gmt":"2022-04-18T16:18:00","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&p=38076"},"modified":"2024-10-02T11:10:56","modified_gmt":"2024-10-02T16:10:56","slug":"back-to-top-button","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/back-to-top-button\/","title":{"rendered":"How to Create a Scroll Back-to-Top Button in WordPress"},"content":{"rendered":"\n

When it comes to retaining and expanding your WordPress site\u2019s readership, maintaining good User Experience (UX) is crucial<\/a>. As such, if your content is lengthy, you may want to add a \u201cscroll back-to-top\u201d button as a handy timesaver.<\/p>\n\n\n\n

Fortunately, adding this to your WordPress site is simple. You can either take the manual approach and use code, or choose a dedicated WordPress plugin. Ultimately, scroll back-to-top buttons can be configured to function on any device your site is viewed on.<\/p>\n\n\n\n

In this article, we\u2019ll take a closer look at what a scroll back-to-top link is (and why it’s good for UX). We\u2019ll then take you through both methods for adding them to your WordPress website. Let\u2019s dive in!<\/p>\n\n\n\n\n\n

Back-to-Top Button<\/h2>\n\n\n\n

It\u2019s no secret that long-form content is increasing in popularity<\/a> on the web. This makes sense, as long-form content presents more opportunity for conveying detailed information, showcasing more images, and infusing keywords to boost your Search Engine Optimization (SEO). However, simply generating long content and ignoring UX will likely put your readers off.<\/p>\n\n\n\n

Adding a back-to-top button can help you avoid this. As the name suggests, once clicked, this simply brings your user back to the top of the page they\u2019re on. They\u2019re suitable for all devices and screens, and typically float in the bottom right hand corner of the screen.<\/p>\n\n\n\n

If you use long-form content, incorporating a scroll back-to-top button is highly recommended. This piece will cover exactly how to do so.<\/p>\n\n\n\n

Adding a Scroll Back-to-Top Button with HTML<\/h2>\n\n\n\n

This method is ideal if you want to directly tweak the appearance and behavior of your page scroll back-to-top button manually (and refrain from burdening your site with extra WordPress menu plugins).<\/p>\n\n\n\n

Before you begin, remember you\u2019ll be playing around with code under the hood. As such, it\u2019s a good idea to use a child theme<\/a> or local development environment<\/a> when adding the button via HTML (as well as backing up<\/a> your site). Let\u2019s take a look!<\/p>\n\n\n\n

Step 1<\/h3>\n\n\n\n

The first step will be to access your WordPress website\u2019s files via File Transfer Protocol (FTP)<\/a> to locate your JavaScript folder. For this example, we\u2019ll use FTP solution FileZilla<\/a>, as it is user-friendly, secure, and available for every platform.<\/p>\n\n\n\n

Once you\u2019ve added your site\u2019s credentials<\/a>, navigate to wp-content > themes > yourtheme > js<\/em> (your theme being the theme you\u2019ve selected for your site):<\/p>\n\n\n\n

\"back<\/figure>\n\n\n\n

In this folder, we\u2019ll need to create a script file that will dictate how your button will behave on your site.<\/p>\n\n\n\n

Step 2<\/h3>\n\n\n\n

Next, you\u2019ll want to create a new file named topbutton.js<\/em> within your js<\/em> folder. To do this in FileZilla, right-click the lower right hand quadrant and select Create new file<\/em>. Once the file opens in your favorite text editor<\/a>, paste in the following code:<\/p>\n\n\n\n

jQuery(document).ready(function($){\n    var offset = 100;\n    var speed = 250;\n    var duration = 500;\n        $(window).scroll(function(){\n            if ($(this).scrollTop() < offset) {\n                      $('.topbutton') .fadeOut(duration);\n            } else {\n                      $('.topbutton') .fadeIn(duration);\n            }\n        });\n     $('.topbutton').on('click', function(){\n            $('html, body').animate({scrollTop:0}, speed);\n            return false;\n            });\n});<\/pre>\n\n\n\n
You can adjust the speed and duration settings in this code to meet your needs as they represent units of time, but this isn\u2019t necessary right now.<\/p>\n\n\n\n
Once you\u2019re happy with your button\u2019s settings, save the file and move onto the next step.<\/p>\n\n\n\n
Step 3<\/h3>\n\n\n\n
You\u2019ll now need to create your button. You can either create one from scratch or download one from a site such as Font Awesome<\/a>. Next, upload your image to WordPress via the Media Library<\/em>, and copy its URL:<\/p>\n\n\n\n
\"image<\/figure>\n\n\n\n
You\u2019ll need to paste this URL into your style.css<\/em> file in order to use it on your site, which brings us to the next step.<\/p>\n\n\n\n
Step 4<\/h3>\n\n\n\n
Your style.css<\/em> file contains all of the design elements of your site, such as fonts, colors, and much more. To access it, navigate to Appearance > Editor<\/em> within WordPress, and open the Stylesheet tab<\/em>. You\u2019ll then need to paste in the following snippet:<\/p>\n\n\n\n
.topbutton {\n     height:50px;\n     width:50px;\n     position:fixed;\n     right:5px;\n     bottom:5px;\n     Z-index:1;\n     background-image:url(\"http:\/\/example.com\/wp-content\/uploads\/2015\/01\/topbutton.png\");\n     background-repeat:no-repeat;\n     display:none;\n}<\/pre>\n\n\n\n
Be sure to replace the image link URL in this snippet with the URL you copied in the previous step. Then select Update File<\/em>, which will will set your button to appear.<\/p>\n\n\n\n
Step 5<\/h3>\n\n\n\n
You\u2019ll now need to tell WordPress that you want to use the JavaScript file you created. Remaining in the Editor<\/em> page, open up the Theme Functions<\/em> (functions.php)<\/em> tab:<\/p>\n\n\n\n
\"Image<\/figure>\n\n\n\n
Next, paste in the following enqueue script<\/a>:<\/p>\n\n\n\n
function my_scripts_method() {\n     wp_enqueue_script(\n           'custom-script',\n           get_stylesheet_directory_uri() . '\/js\/topbutton.js',\n           array( 'jquery' )\n     );\n}\n\nadd_action( 'wp_enqueue_scripts', 'my_scripts_method' );<\/pre>\n\n\n\n
Don\u2019t worry if you don\u2019t understand the text\u2014WordPress will, which is the important thing! When you\u2019re ready, hit Update File<\/em>.<\/p>\n\n\n\n
Step #6<\/h3>\n\n\n\n
Finally, to add your button to the footer of your web page, navigate to the Theme Footer (footer.php)<\/em> file within the Editor<\/em> screen, and paste the following code snippet (ideally before a closing div tag to ensure optimal spacing):<\/p>\n\n\n\n
<a href=\"#\" class=\"topbutton\"><\/a><\/pre>\n\n\n\n
Select Update File<\/em> and you\u2019re all set! Your back-to-top menu button should now display on the pages of your WordPress site.<\/p>\n\n\n\n
Adding a Scroll Back-to-Top Button with a Plugin<\/h2>\n\n\n\n
While the manual method is going to be simple for experienced developers, everyone else will likely want to use a dedicated WordPress plugin. Let\u2019s roundup some of the best free options currently available.<\/p>\n\n\n\n
To Top<\/a><\/h3>\n\n\n\n
\"To<\/figure>\n\n\n\n
This lightweight plugin<\/a> will add a customizable floating button to your pages, letting your readers glide back to the top of the page. With To Top, you can adjust your button icon\u2019s size, color, and position effortlessly using drop-down menus. There\u2019s even an option for optimizing your menu button for mobile devices.<\/p>\n\n\n\n
What\u2019s more, you can also set when the button appears on your page, reducing clutter, and boosting UX.<\/p>\n\n\n\n
WPFront Scroll Top<\/a><\/h3>\n\n\n\n
\"WPFront<\/figure>\n\n\n\n
Although it\u2019s not as feature-heavy as To Top, WPFront Scroll Top<\/a> is a versatile option to consider. You can set practically any image for your button, add Font Awesome<\/a> elements, and even adjust the icon shape.<\/p>\n\n\n\n
In addition, while WPFront Scroll Top is configured to display responsive icons that will look good on any mobile device, you also get the option to not show your button on smaller screens.<\/p>\n\n\n\n
Page scroll to id<\/a><\/h3>\n\n\n\n
\"Page<\/figure>\n\n\n\n
Page scroll to id<\/a> is\u2014much like the other solutions in this list\u2014simple to use and implement. However, it\u2019s unique in that you can also add buttons for horizontal and custom scrolling. This is going to be ideal for one-page WordPress sites designed for smooth scrolling on smaller screens.<\/p>\n\n\n\n
The plugin also comes with a huge array of customization and configuration options. You can use it to quickly adjust your scroll duration and behavior, tweak button animations, set anchor point targets and more.<\/p>\n\n\n\n
Reliable and Affordable WordPress Support With WP Engine<\/h3>\n\n\n\n
At WP Engine<\/a>, our expert team is committed to helping you keep your WordPress site\u2019s UX top notch. Our dedicated content library<\/a> contains a wealth of articles, tip roundups, and insights for improving the performance and appearance of your site. If you have any specific enquiries or concerns, our support staff are able to help 24\/7.<\/p>\n\n\n\n
To find out more about our about our quality hosting plans for WordPress<\/a>, or find out how we can boost your WordPress site performance, don\u2019t hesitate to contact us today!<\/p>\n","protected":false},"excerpt":{"rendered":"
When it comes to retaining and expanding your WordPress site\u2019s readership, maintaining good User Experience (UX) is crucial. As such, if your content is lengthy, you may want to add a \u201cscroll back-to-top\u201d button as a handy timesaver. Fortunately, adding this to your WordPress site is simple. You can either take the manual approach and…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":131726,"template":"","resource-topic":[912,901],"resource-role":[895,896,906,903],"resource-type":[916],"class_list":["post-38076","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nHow to Create a Scroll Back-to-Top Button in WordPress<\/title>\n<meta name=\"description\" content=\"The back-to-top button lets users jump to the top of a page instantly. Learn how to create a back-to-top button using HTML & plugins.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Scroll Back-to-Top Button in WordPress\" \/>\n<meta property=\"og:description\" content=\"The back-to-top button lets users jump to the top of a page instantly. Learn how to create a back-to-top button using HTML & plugins.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/back-to-top-button\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-02T16:10:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2022\/06\/Open-Web2_1200x627.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"627\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Create a Scroll Back-to-Top Button in WordPress\" \/>\n<meta name=\"twitter:description\" content=\"The back-to-top button lets users jump to the top of a page instantly. Learn how to create a back-to-top button using HTML & plugins.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2022\/06\/Open-Web2_1200x627.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/back-to-top-button\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/back-to-top-button\/\",\"name\":\"How to Create a Scroll Back-to-Top Button in WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2022-04-18T16:18:00+00:00\",\"dateModified\":\"2024-10-02T16:10:56+00:00\",\"description\":\"The back-to-top button lets users jump to the top of a page instantly. Learn how to create a back-to-top button using HTML & plugins.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/back-to-top-button\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/back-to-top-button\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/back-to-top-button\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Scroll Back-to-Top Button in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Scroll Back-to-Top Button in WordPress","description":"The back-to-top button lets users jump to the top of a page instantly. Learn how to create a back-to-top button using HTML & plugins.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Create a Scroll Back-to-Top Button in WordPress","og_description":"The back-to-top button lets users jump to the top of a page instantly. Learn how to create a back-to-top button using HTML & plugins.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/back-to-top-button\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-10-02T16:10:56+00:00","og_image":[{"width":1200,"height":627,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2022\/06\/Open-Web2_1200x627.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"How to Create a Scroll Back-to-Top Button in WordPress","twitter_description":"The back-to-top button lets users jump to the top of a page instantly. Learn how to create a back-to-top button using HTML & plugins.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2022\/06\/Open-Web2_1200x627.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/back-to-top-button\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/back-to-top-button\/","name":"How to Create a Scroll Back-to-Top Button in WordPress","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2022-04-18T16:18:00+00:00","dateModified":"2024-10-02T16:10:56+00:00","description":"The back-to-top button lets users jump to the top of a page instantly. Learn how to create a back-to-top button using HTML & plugins.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/back-to-top-button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/back-to-top-button\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/back-to-top-button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Create a Scroll Back-to-Top Button in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/05\/scroll-to-top-resourcegrid.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Agency, Developer, Entrepreneur, Marketer","topic":"<strong>Topics:<\/strong> Performance, WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/38076","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/131726"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=38076"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=38076"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=38076"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=38076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}