Every theme comes with at least two built-in back to top link styles that can be selected using theme settings: Standard and In footer. Both appear at the bottom of the page.
The Standard style appears in the bottom-left of the screen when it has been scrolled more than 250px:
Fixed back to top link
View code c2bb36cd71d55b7a7742af805c228a35b21c588c20d564f6e99ac8f8dc1608847b3986e3c0416274c342a2d7adcf433190e25e33ee9b8d69696d0c09842a7ba28820cdc9a464aa439d684c4e32fb65d209a579b2d2d67957df905a2b1c6abcc23dd570f58e2de0b4ac48f63ad3d3acdfdbe2a0b4f96e0856cbbc34fa6969ecc8ad43c5cc85487f1ddd8d993f8557b52fd1ec1850dc24a06a23e57beb8cf6fc38246c0f131b8b63de1d799838e3a11772c9a71812e7caeaedae744e0623e602643d513e2a70254ef40411374a8df8c87d3fd1bfee53037d9e107b79238d1e92f1ed1088abd8cf2a4d5ae5a482242504927032f9a36323441edfcfb3c9f4c5c582b25a6c7eb0c446118d167e6d9dba4dceffe5f9df911d087bc21d2f0c723a3b8658c35dac0339bf0aa953c0a9b78cb17f541c436183f5732c8b83884208f073d8e0caa5c2c501d917798476a74ebc078bec60be9c72ed235f45bec1336bc7bd27d702b56063fc8ff693494bd9a358242aab2a80578ece562bb411e3274630892050ff6f65ed4d9f2b7ffe522e810dd2d37d980319ce8a4e1a06596820d04f97cff14efdfde405f9f40d1f87b07b023c405a73d12142aa34476f0641861db79869dd33d08fca876a21dd94b9fc81c11e82be8901b4b09ecf62503500a1b9c5edd08b4e420c4d6e21fcaaadf2d7d9ce01fb1807db6959f7ea0450c3e79e0e0d0a15abcbb6fcd3546add6eec553693ef7ce23d4be879e36c7c46662a4946b6d6e0e265a9fccc94c9c735b4abd44474b0baf4db7671d0db870a646a17e27c38d7d7198372455d74e15247a3443ea907f0f4c2341c981cc70a8ed8933d87e53be7aabda604c24280f64eb4b2fcca419619e7f9055ff81db3e7d33e783d5802f35a27d1d54cbcfeadb29d19c24d3cba7f6a8055e8ac450869c9d9ef71b7d8a76c448dab4e611fa7caa6be94f266f592dd0dbf7576d05dab0f1d58e581a8f58ba2e3a1cbc1ca382e55d4c49d23f77157fe6e675ee416365d1c6daedc42e307135a8e6856d82c92c70455e163779a7767a59de578
The In footer style appears in the top-right of the page footer:
Back to top link in footer
View code 9f0f799e7adceebfc6f6e0f0c43b6f46550d757899c7c0b8cf23bed576a7d63f889823407c356dec52b5077e2e8dc0813a75affcac67416597f808df4fc4f26d924d1d93f0ac5a0b7461d860979b02feac0f6a27ae6caaf6933e6a9887b68d06d96d23b9500b70194447b8554bf6a3bf2fbf2a5ab81a4d52504f3a08f32bffe393932057ab40c1edc3df85918debac6c1a981c50b876d4312fb16395aadfa153868702d5f5cf953eae621ca02788dcb7b70552885b4d658e2a91fc80c20fb69088bdf815467901538abcecd013b0792c2e92347c0b57485fb1ba875584d00f4c3e415519bda255b45ea32105b41949b200e0c37c49b9cc6bf3e7df253b34f96e0c0501707b731b77fc17dd7d7f6b8eb071ecd3fb70eae3e508bb2166554e06c6dc27b10cdc92a8bcd7d6ac2b73f1c0af2dbacb7e245194f0e21424c4952c78f979996d56da0599cd9956a498c365b66d97df81f5fa88e2c7d01999f0d118bf7b60fc2eba8a5374fabbcc9f0d8b706d06a839385a71dbfcef6a08a986050fa5b7d6a70bb855fdb1fdb0815a8a1dc292f938add2932f169223d462d6619492961fdab25426004ce85c862b3a010b50491ad5c44fab47df54ffef749a66df31e3a0b686941c5538602837e27d7c3b77a56bcb80fa83e763a20bd450de72d5780e161ac74baed17fe2076fd4ba98faffd93d8794cb4c0e16ac9dec3cdc82056934e1b64e87ff82bbdce0918e316309044c4490a78815a96f8ca3784bfd1dd62a530132f101fd470ca46369706e336736bce4d7ec25f0558a448a6e893c07245e35f31bff8b1014fa070c39b5d60b45932818339edbb07d625b09dc8a1210c9fdd09b1ac1af6e0812c31ec9bb8f2e0ac6d76b4844d6949652c412da7f64d40e13145a0547eabd943cb4dc420f969d5a54b47ffbd31772c57556af9b6e56581780a948cddc11a8af6cb43fa9b84b3e37a5b1af5ccff311dd26aa1b92bae2095b7869d1c399b9252a8047a9998d6aa2151a7caf4f5c2bf8302d2ae011e17dcc6eef9344278e3c93a7e6907016ae173d6fe639c685813d62bc24ad6cb8c39305727e1b8f6706880f4db85a32b3b653a31c92ca8d070f6f026b1c318644a6e61f08482beba09ca09c4bd365c947f79387304b7f71de205aa44e56601f9d4b36b62ca60ddbfc119d48ad84c7b49411b6b4486366f0d79b6e8b366082cfc591a7583d9c28eda24cb96d1af34b823aa22f43afcc0cba66ee689b3acfeb226cd79d766687d3c5cdac9c19443cc33c3c04a3bea5e1b994d1b8398d494f8f115abd17a24621d938d50c080c12951b32860473115cc257b64d26e3b164387e1642bf6860a7d4622d3aa17e1fd7b1cb15ebea219d4976e69a4302ed69255a65ffb7d9fd6c2436de68d1386fd5173a355e70df760dbd7845729b752913b86f1221c135f3b0808ce389a9f66c2bd58f605b2cd8171cc8838eb0cfba110e5176930c2c5fadb6dc332163b300664a312b0b38dfdce94d0982b11aa77d7b0554a0ccaf3f6b97424d72f55c3ef5174050ab88c17ea8f966a974c217811a1fdcc6bf0644100b3505622a28700b4e6f48d2b60efe75870a6ba0f9d6e661dc965b25e7182fbc9ab50f972d2a1b97eee9a82e1307eb84bd5c81b94e0f3fea7226337eb447297a1bd9204d598f2d2bb3300d248527163bac5df873ac77f1
Inline styles
You can also add inline back to top links that copied into a specific part of a page template.
Inline back to top link (on small screens)
View code 2705ac749b13ff7dd476ecd1aa5aab060eb2bfcaeee414a2140b0f2fe330810e3a82b154ac14badc02217dd6884f355b06124e390564e9d76fdd0b7ecbdbe7485ac0e837eacd1f856349367123c9d357b82db9d08498b549d29cb84fb6637fae7aa3a9b50c803b2ec1c8146c5ff7d30a4a428968e3ac5b93f9420e8dff927dc096946f933d61fd7d4669a42b2ae2b0abb80cd6dc2c43142620c0a9e01fed0188cc848ede79ff4305716677624d4d0d8260a075c4c514f3a1b6204ad596d6f3303ddf10e5b28a5485aef6b26dee3aacb06d34fce1350cd69f2281b0266679c79f52443b2a408e63cf5c4758521e73ab60a305ca2f7b4fbff027f2ae49df350e14e5b2d3e421d558e6f5375164448ab56192d171c30095e4976541fca27cbfd81375feb443b2eda3b892fc53bd3cff2edca4d983030654a152073124b812fd5bf3c84a63a880dc5f9224561ad8ca21a46ff2aace05e298d114f3615e3b7ed80d54476ae2e5f96e0b253f98376482d6a258d852c181bf2cdfc45f57cf2d432cba14ccb63b621a324b58bf74a7f398a15f58b308f5d043377fbe5b9d10e36cecb33eaadd93c2ae9647e19c83b6802c799456ada42b61011ffed40360c0ecc899a3dead4b955db49b16ad286a07d8956cc02f39b7aa7da598bd096a22b331ae12f511ed60d89278a5e233bcd8f75e73f59d3ef4848b996c005e5e3d21c68bf27afe4099288bd791279739ce06b5e28ce14a89859f2c987c1797357b09ad6a81b7ec43aa54a24327227903bf2d0e8903800f845ca2ef8126b02f9be2c93d95ef5662332c478f60e29e43849d3cb020237de42dafa25ba3cda57e71b044629f14e83f7c52817578c79ad3f27318c414f02f641c6713885df205f05ffb3d1b6806ac480109d88538d70282f55c73a3d20f05279c57db31b58b74bb6cbd1125f77ef4b04b88fe1fc4b0fce529acfa3855cc0c489dea79871189415faf6f40081880eed9c39ef701f7cda24901fc5d22879a3a6123a2417da7e1e5b302b40747a9eedc927e99686386e3190eac762cfcfc355d5fb478bb5c3d567128ebfd0ea5ed55c48248880a47adf11beeaa013cf29361e92eab044859b00657a8b55a9395ec98ba92d9ce5100620be75eef8940066b812278d233f0035628335f8c1cbda1d0d6094c44cfec76722fea51a2d1fd9c3c99bfb6f3df21ff74a11e35895b8eb8a2b6edd826
Back to top links exist within the page footer (footer.hbs) and, when enabled, appear on all pages. A back to top link can be added to the help center by selecting a style from the using the Back to Top link style theme setting in the General page elements setting group.
To replace one of the built-in styles, copy-and-paste just the template code of your chosen pattern into the bottom of the footer.hbs template.
<template id="tmpl-back-to-top-link">
...
</template>
The Standard style of back to top link is configured to appear once the page has scrolled more than 250px. You can change that threshold by updating the data-threshold attribute of the back to top link element in the footer.hbs template:
<div data-element="back-to-top" data-template="back-to-top-link" data-threshold="250px"></div>
To an an inline style to a page, simply copy the pattern code into the page template where you’d like it to appear.
