{"id":139813,"date":"2025-02-01T08:55:13","date_gmt":"2025-02-01T14:55:13","guid":{"rendered":"https:\/\/getflywheel.com\/layout\/?p=35090"},"modified":"2025-02-12T08:56:27","modified_gmt":"2025-02-12T14:56:27","slug":"sticky-back-to-top-button-tutorial","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/sticky-back-to-top-button-tutorial\/","title":{"rendered":"How To Add a Sticky Back to Top Button to Your Website"},"content":{"rendered":"\n<p>We\u2019ve all been there. You\u2019ve found a fantastic online guide, scrolled all the way to the bottom, and then think, \u201cWow, I\u2019d love to see what else this site has to offer!\u201d&nbsp;<\/p>\n\n\n\n<p>But then you have to scroll.<\/p>\n\n\n\n<p>ALL.&nbsp;<\/p>\n\n\n\n<p>THE.&nbsp;<\/p>\n\n\n\n<p>WAY.<\/p>\n\n\n\n<p>TO.<\/p>\n\n\n\n<p>THE.<\/p>\n\n\n\n<p>TOP.<\/p>\n\n\n\n<p>And then you think\u2026. \u201cHmmm, never mind.\u201d And close the page.&nbsp;<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">What is a sticky back to top button?<\/h2>\n\n\n\n<p>Also known as a scroll-to-top button or go-to-top image, the sticky back to top button is a helpful navigation element that helps users get back to the top of the web page they\u2019re viewing. A common UI pattern is to place this button in the lower right-hand corner of the screen, making it \u201csticky\u201d via a fixed position so it\u2019s always accessible as the user scrolls down the page.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Things to consider before adding a back to top button<\/h2>\n\n\n\n<p>Like any&nbsp;<a href=\"https:\/\/wpengine.com\/resources\/web-design-trends\/\" rel=\"noreferrer noopener\" target=\"_blank\">popular design trend<\/a>, we encourage you to take a step back before implementing it on your site to ask yourself: If I\u2019m going to build this, what&nbsp;<a href=\"https:\/\/www.nngroup.com\/articles\/back-to-top\/\" rel=\"noreferrer noopener\" target=\"_blank\">back top button guidelines<\/a>&nbsp;do I need to follow?&nbsp;<\/p>\n\n\n\n<p><strong>Here are a few questions to answer before you build your scroll-to-top button:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Where will it be placed?<\/li>\n\n\n\n<li>How big (or small) should it be?<\/li>\n\n\n\n<li>What design patterns should you follow so it stays on brand? (Think colors, fonts, icons, etc.)<\/li>\n\n\n\n<li>Is it at risk of covering important site content, such as information in a sidebar?\u00a0<\/li>\n\n\n\n<li>What happens on mobile devices? Will it be responsive?\u00a0<\/li>\n\n\n\n<li>Do you actually need it?*<\/li>\n<\/ul>\n\n\n\n<p><strong>*Note:<\/strong>&nbsp;You could make the argument that users today are conditioned to scroll down (and back up!) on a page, which would eliminate the \u201cneed\u201d for a back to top button. Our advice: Test it! Add a&nbsp;<a href=\"https:\/\/support.google.com\/analytics\/answer\/1033068\" rel=\"noreferrer noopener\" target=\"_blank\">Google Analytics event<\/a>&nbsp;on click or use a heat map tool like&nbsp;<a href=\"https:\/\/www.hotjar.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">Hotjar<\/a>&nbsp;to see how your site visitors engage with the page.&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>The best \u201cbest practice\u201d to follow is one based on data from your own site and users!<\/strong><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">How to add a sticky back to top button to your WordPress site<\/h2>\n\n\n\n<p>In this tutorial, we\u2019ll show you how to add a back to top button.&nbsp;<\/p>\n\n\n\n<p><strong>Pro-tip:&nbsp;<\/strong>While this tutorial isn\u2019t too advanced, we still recommend trying it out on a&nbsp;<a href=\"https:\/\/wpengine.com\/resources\/what-is-a-staging-site-why-have-one\/\" rel=\"noreferrer noopener\" target=\"_blank\">staging site<\/a>&nbsp;or in local environment, so there\u2019s absolutely no risk to your live site. If you need to set one up quick, check out&nbsp;<a href=\"https:\/\/wpengine.com\/local\/\" rel=\"noreferrer noopener\" target=\"_blank\">Local<\/a>, a free local WordPress app that\u2019s incredibly easy to use.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"https:\/\/getflywheel.com\/layout\/wp-content\/uploads\/2019\/08\/2019-08-16_Sticky-Back-To-Top_V5_With-Music.mp4\"><\/video><figcaption class=\"wp-element-caption\">Check out this quick video tutorial for adding a sticky back-to-top button or see the <a href=\"https:\/\/codepen.io\/joshuamasen\/pen\/OYaYbL\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pen ES6 scroll-to-top button<\/a> created by <a href=\"https:\/\/codepen.io\/joshuamasen\" target=\"_blank\" rel=\"noreferrer noopener\">Josh Lawler<\/a> on <a href=\"https:\/\/codepen.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">CodePen<\/a>. <\/figcaption><\/figure>\n\n\n\n<p>For this sticky back-to-top button tutorial, we&#8217;ll use three languages: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HTML<\/strong> for the markup to create the button<\/li>\n\n\n\n<li><strong>CSS<\/strong> to style the button and have it match your brand<\/li>\n\n\n\n<li><strong>JavaScript<\/strong> to make it work and define the behaviors of the button<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Back to top button HTML<\/h3>\n\n\n\n<p>In the HTML, you\u2019ll find the following lines: <\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;a class=\"top-link hide\" href=\"\" id=\"js-top\"&gt;\n  &lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 12 6\"&gt;&lt;path d=\"M12 6H0l6-6z\"\/&gt;&lt;\/svg&gt;\n  &lt;span class=\"screen-reader-text\"&gt;Back to top&lt;\/span&gt;\n&lt;\/a&gt;<\/pre>\n\n\n\n<p>TThis is going to be your sticky back to top button! You can see that we\u2019ve added a CSS class called&nbsp;<code>.top-link<\/code>, and are using some simple JavaScript to make it work. We\u2019re also using an&nbsp;<a href=\"https:\/\/css-tricks.com\/lodge\/svg\/\" rel=\"noreferrer noopener\" target=\"_blank\">in-line SVG<\/a>&nbsp;for the button.&nbsp;<\/p>\n\n\n\n<p>Besides an SVG, you could also use an image file or font icon to create the button. We prefer the SVG method, however, because:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>It won\u2019t get pixelated at different screen sizes, like a raster image would.\u00a0<\/li>\n\n\n\n<li>SVGs are universally supported across browsers. (Yay, user experience!)\u00a0<\/li>\n\n\n\n<li>It\u2019s easy to style with CSS, so you can change everything about it really easily.\u00a0<\/li>\n\n\n\n<li>It only takes one line of code, making it lightweight and better for\u00a0<a href=\"https:\/\/wpengine.com\/resources\/tips-to-increase-wordpress-speed-and-performance\/\" target=\"_blank\" rel=\"noreferrer noopener\">site performance<\/a>.\u00a0<\/li>\n<\/ol>\n\n\n\n<p>The last really important piece you\u2019ll find in the HTML is this line:<\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;span class=\"screen-reader-text\"&gt;Back to top&lt;\/span&gt;<\/pre>\n\n\n\n<p>This is critical for users operating with screen readers and will improve the&nbsp;<a href=\"https:\/\/wpengine.com\/resources\/wordpress-website-accessibility\/\" rel=\"noreferrer noopener\" target=\"_blank\">accessibility of your WordPress site<\/a>. (Think of it like an&nbsp;<a href=\"https:\/\/wpengine.com\/resources\/why-use-alt-tags-for-accessibility-instead-of-seo\/\" rel=\"noreferrer noopener\" target=\"_blank\">alt tag for an image<\/a>, but for your scroll-to-top button!)&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS for back to top button<\/h3>\n\n\n\n<p>Now let\u2019s talk more about that CSS class,&nbsp;<code>.top-link<\/code>. We\u2019re using this to actually style up the button, and it\u2019s where you\u2019ll define qualities such as how big it\u2019ll be, how much padding should be around it, the color, etc.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.top-link {\n  transition: all .25s ease-in-out;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  display: inline-flex;\n  \n cursor: pointer;\n align-items: center;\n justify-content: center;\n margin: 0 3em 3em 0;\n border-radius: 50%;\n padding: .25em;\n width: 80px;\n height: 80px;\n background-color: #F8F8F8;<\/pre>\n\n\n\n<p><strong>Note:&nbsp;<\/strong>We\u2019re using Sass (a stylesheet language), to write our CSS a little bit faster.&nbsp;<a href=\"https:\/\/sass-lang.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">Learn more about this preprocessor here<\/a>.&nbsp;<\/p>\n\n\n\n<p>A couple important pieces from this snippet:&nbsp;<code>transition: all .25s ease-in-out<\/code>; controls how \u201cfast\u201d your button will appear or disappear on the screen, and&nbsp;<code>position: fixed<\/code>; is what makes the button \u201cstick\u201d to the location you want it.<\/p>\n\n\n\n<p>Next, you\u2019ll see rules for&nbsp;<code>.show<\/code>&nbsp;and&nbsp;<code>.hide<\/code>. We\u2019ll use JavaScript to switch between these classes in order to tell the browser when the button should (or shouldn\u2019t) appear on the page.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">  .show {\n    visibility: visible;\n    opacity: 1;\n  }\n  \n  .hide {\n    visibility: hidden;\n    opacity: 0;\n  }<\/pre>\n\n\n\n<p>Before we go into the JavaScript, there are just a few more lines we\u2019ll add to the CSS. <\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">svg {\n fill: #000;\n width: 24px;\n height: 12px;\n}\n&amp;:hover {\n background-color: #E8E8E8;\n \tsvg {\n\t fill: #000000;\n\t}\n}<\/pre>\n\n\n\n<p>These classes will stylize the SVG image for the arrow itself and tell the browser how to display the button when a user hovers over it. <\/p>\n\n\n\n<p>Finally, we\u2019ll add some CSS to hide the text that says \u201cback to top\u201d for screen readers. <\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">\/\/ Text meant only for screen readers.\n.screen-reader-text {\n\tposition: absolute;\n\tclip-path: inset(50%);\n\tmargin: -1px;\n\tborder: 0;\n\tpadding: 0;\n\twidth: 1px;\n\theight: 1px;\n\toverflow: hidden;\n\tword-wrap: normal !important;\n\tclip: rect(1px, 1px, 1px, 1px);\n\t&amp;:focus {\n\t\tdisplay: block;\n\t\ttop: 5px;\n\t\tleft: 5px;\n\t\tz-index: 100000; \/\/ Above WP toolbar\n\t\tclip-path: none;\n\t\tbackground-color: #eee;\n\t\tpadding: 15px 23px 14px;\n\t\twidth: auto;\n\t\theight: auto;\n\t\ttext-decoration: none;\n\t\tline-height: normal;\n\t\tcolor: #444;\n\t\tfont-size: 1em;\n\t\tclip: auto !important;\n\t}\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">JavaScript for back to top button<\/h3>\n\n\n\n<p>Now on to the JavaScript! We\u2019re going to do this without loading jQuery, which will help keep your code lightweight and quick to load. <\/p>\n\n\n\n<p>The first variable will help the browser find the button. <\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">\/\/ Set a variable for our button element.\nconst scrollToTopButton = document.getElementById('js-top');<\/pre>\n\n\n\n<p>Next, we\u2019ll create a function that shows the scroll-to-top button if the user scrolls beyond the height of the initial window. <\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">const scrollFunc = () =&gt; {\n  \/\/ Get the current scroll value\n  let y = window.scrollY;\n  \n  \/\/ If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!\n  if (y &gt; 0) {\n    scrollToTopButton.className = \"top-link show\";\n  } else {\n    scrollToTopButton.className = \"top-link hide\";\n  }\n};<\/pre>\n\n\n\n<p>We\u2019ll also add an event listener, which will watch as the user scrolls (so we know where they\u2019re at on the page). <\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">window.addEventListener(\"scroll\", scrollFunc);<\/pre>\n\n\n\n<p><strong>Almost done! <\/strong>Next, we need to define the function that makes the button actually take the user back to the top of the page. To do that, we\u2019ll create a variable for the number of pixels we are from the top of the page. If that number is greater than 0, the function will set it back to 0, taking us to the top! <\/p>\n\n\n\n<p>We\u2019ll also add a little animation here, so the jump isn\u2019t too sudden. <\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">const scrollToTop = () =&gt; {\n  \/\/ Let's set a variable for the number of pixels we are from the top of the document.\n  const c = document.documentElement.scrollTop || document.body.scrollTop;\n  \n  \/\/ If that number is greater than 0, we'll scroll back to 0, or the top of the document.\n  \/\/ We'll also animate that scroll with requestAnimationFrame:\n  \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/window\/requestAnimationFrame\n  if (c &gt; 0) {\n    window.requestAnimationFrame(scrollToTop);\n    \/\/ ScrollTo takes an x and a y coordinate.\n    \/\/ Increase the '10' value to get a smoother\/slower scroll!\n    window.scrollTo(0, c - c \/ 10);\n  }\n};<\/pre>\n\n\n\n<p>Last but not least, we just need to tell the page to run that function when someone clicks our sticky back-to-top button. <\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">\/\/ When the button is clicked, run our ScrolltoTop function above!\nscrollToTopButton.onclick = function(e) {\n  e.preventDefault();\n  scrollToTop();\n}<\/pre>\n\n\n\n<hr class=\"wp-block-separator aligncenter has-css-opacity\" \/>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>That\u2019s it! You\u2019ll now have a fully functioning and customizable sticky back to top button on your WordPress site.<\/p>\n\n\n\n<p>If you want even better performance from your site, turn to WP Engine and our <a href=\"https:\/\/wpengine.com\/wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">hosting for WordPress sites<\/a> to push your digital presence to the next level!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019ve all been there. You\u2019ve found a fantastic online guide, scrolled all the way to the bottom, and then think, \u201cWow, I\u2019d love to see what else this site has to offer!\u201d&nbsp; But then you have to scroll. ALL.&nbsp; THE.&nbsp; WAY. TO. THE. TOP. And then you think\u2026. \u201cHmmm, never mind.\u201d And close the page.&nbsp;<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":139906,"template":"","resource-topic":[1396],"resource-role":[1397,896,897],"resource-type":[916],"class_list":["post-139813","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Add a Sticky Back to Top Button to Your Website<\/title>\n<meta name=\"description\" content=\"Use this guide to add a sticky back to top button on your WordPress site and solve the age old UX problem of never-ending scroll.\" \/>\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 Add a Sticky Back-to-Top Button to Your Website\" \/>\n<meta property=\"og:description\" content=\"Use this guide to add a sticky back-to-top button on your WordPress site and solve the age old UX problem of never-ending scroll.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/sticky-back-to-top-button-tutorial\/\" \/>\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=\"2025-02-12T14:56:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/06\/Back-to-Top_1100x500.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\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 Add a Sticky Back-to-Top Button to Your Website\" \/>\n<meta name=\"twitter:description\" content=\"Use this guide to add a sticky back-to-top button on your WordPress site and solve the age old UX problem of never-ending scroll.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/06\/Back-to-Top_1100x500.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\/sticky-back-to-top-button-tutorial\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/sticky-back-to-top-button-tutorial\/\",\"name\":\"How To Add a Sticky Back to Top Button to Your Website\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2025-02-01T14:55:13+00:00\",\"dateModified\":\"2025-02-12T14:56:27+00:00\",\"description\":\"Use this guide to add a sticky back to top button on your WordPress site and solve the age old UX problem of never-ending scroll.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/sticky-back-to-top-button-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/sticky-back-to-top-button-tutorial\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/sticky-back-to-top-button-tutorial\/#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 Add a Sticky Back to Top Button to Your Website\"}]},{\"@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 Add a Sticky Back to Top Button to Your Website","description":"Use this guide to add a sticky back to top button on your WordPress site and solve the age old UX problem of never-ending scroll.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How To Add a Sticky Back-to-Top Button to Your Website","og_description":"Use this guide to add a sticky back-to-top button on your WordPress site and solve the age old UX problem of never-ending scroll.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/sticky-back-to-top-button-tutorial\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2025-02-12T14:56:27+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/06\/Back-to-Top_1100x500.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"How To Add a Sticky Back-to-Top Button to Your Website","twitter_description":"Use this guide to add a sticky back-to-top button on your WordPress site and solve the age old UX problem of never-ending scroll.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/06\/Back-to-Top_1100x500.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\/sticky-back-to-top-button-tutorial\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/sticky-back-to-top-button-tutorial\/","name":"How To Add a Sticky Back to Top Button to Your Website","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2025-02-01T14:55:13+00:00","dateModified":"2025-02-12T14:56:27+00:00","description":"Use this guide to add a sticky back to top button on your WordPress site and solve the age old UX problem of never-ending scroll.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/sticky-back-to-top-button-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/sticky-back-to-top-button-tutorial\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/sticky-back-to-top-button-tutorial\/#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 Add a Sticky Back to Top Button to Your Website"}]},{"@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\/2019\/06\/Back-to-Top_343x245.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer, Developer, Freelancer","topic":"<strong>Topics:<\/strong> Design","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139813","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\/139906"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139813"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139813"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139813"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}