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 3d3050bd01834edf296c4ae472201e85ba463b6b24a374cbae103a010ba1b400dfb97e38265d54a0b7b946e7a92b7656c230c817e6f2f238dfcdbbb7051866a29c18af102f005b76d3bba45b57db647b3e48cc117f765e5c3b98b33e8e29cb37442e6de314ad2c03c742f947bcadbb981464123ed242d61f7677ac1daa437ca69d8d4def46f691e866f96f7690c46b4935b81ebc1175803b58139db46564b7a823279c51ae624af1d7b5229ddb3635febe71a31f237454238ff8553d77bf30dc25f929651e2e3ae6507b26678090266b7c66aba841afc1d84c7c4675e2a57ab78e0441590628de3cc326a29f33d662ac2118e27d696f48a386ed5135fa7958600ef45fa668c531205ba821a003a45e0f75c96e18c8a41e7ca6ddfec7a6c0e10bceaa9c82fd340d478bbcf8811efa9c00f7e8f9163a3b6d97193e945f6fcd1e0675d241e23a03a90252d66ea6f7f91ea00f6518c72ee02679dc3fe2afffdf220eebdd99ae12d3a8c6e17d93bd304cdfdd810086f2813865e5b4ff0e7043a5f3585c1c41c295177b8194699aba84fcd05c7921f34713d38ebe3b225a7c2fa58cf19d9008bcea864c69ea918578af4394303fbe8e3ad14507678da3cd78afc49cc7f754b09f28033788343e428e0d8ec8bc2a4490e0752e48aa3b4a271abc87e3515c30ecb73605dfcf7d2516381f08799577a78614df3070853ebeaa9ebc87ccfd299aab0b70d4a13f2d4f04c61518b8cc2b14d53da518c8b439acba418c2c08d0786041cd8cc6bf18a88b2e40a97130d935fba84422d7743a2ede3c416158b85f99ba485d68e615ed10b9661def7bc002cb36a3c7d38f88590be779f33b427e38d5692e0bc7a3d3f356321c83f7b5116fcc3bce9a5eed6fde5a9596db0db492e945b92df725630f9123e68d0f87f99cf9c32ed212a571700d7b824b21cb6fcf68f44b346f98dfd324013a4d6fac3dcdc681277a04e4402bdc6dc961a7f3725887498725638c9b9aa1cadf4d440e140404f47b9f047b4c55cf05c0f0830015612c75fe348a7432fe69710c1852aa9d12ee
The In footer style appears in the top-right of the page footer:
Back to top link in footer
View code 6c1d59169ef153f8e75c3b55e5f0902ca1353439616a6b0350b881bd7dc3184dfda152159b50fdf8771c8b1f6521c060e31f57f840d5f6342640658f33b0c81d610b6ef1de11c935c4301d2466688941bab0e7883ef832fd005f1e6f3418093a3fc6f53176804d5fea6656bf7d953ebb5ff5d8aef31336244cafc1b4d1dcf3fd28d38730e41e5ecf1fbe7aa8bd44ae88905a04e180a3223d79cd4af0cf5ab8f3553f5db8883053e650c67d21c19d32382810db5bea6452bcd5dc660021275a26c2fbab1cb9ab4bc3ffbb6152743cd31ef81d6d00cfedf3f3dc7f1b32782bf8faafac6888d90efb8a3c8761c0b888749fe81406e591068b9749a1f5959c577da2223f2c37f597554bc4db16a87a00b59bd6d0c238804fe8e2584c5f9471126001ef30d1c577704f37297bf02072e2c665e695f8b7ff94e7bc8b00c381230afe815e6fc10f16eede848a1e6369c2eb679eea0f910e30a75bcc7bca9ee918bd9047a056a5e13d67cb6e24b930508d2f13f7210ce3df4562315449e735a0394e81a191526a1c0a9ccd195567ccd4503889d9639c0d572993312ef4a2677dd37a867905c0897118992c834a0839010736e3672de966b5ba63f1f695ff2ca485407daaf8b395d724743d18ae9c0db13c6caf6fc141448f84eef387b390c4222d8b9f7ab7b7477aa5683f17f643217c50efc2887a70d3a452405623f045b26772bc79e94321eb480d4393dcd7e20268254af8f16f4655585ff6ae1e2dae4fca139889b4b708a94b66e5205b10c9832a43706ce748a102c89aa6f0cb14107dfe34a5b2dedcf949cd46685d16d7d40327df3cbbc2270dabd1a41d78afa558f7ab3edd03cc993572f2b339f365d87b59a63e9636a9c239d8ea9417ad1052ddb621a142101c900a3cea36102e3a96cd10ced1d8edfae831291dadad610f91aee126da69656d728d05b93dd97cd73bb666d0cdaba92c8c649922af9d99ff6c0433a7744635b2b58d1bbbfc74abcd36ae5cff1a3ad20895fcc93a22d994b6bdca3670cbb42b9a8ea91a14b7ff81b7adffd31e3ee6e8787fafc65a0fb2485433f0b1f63a58f771fe145f27ca77059bf332189e6b0079d89b9301213c531c903e9cd6077edab7b8a1183c68c9c8745b42c7f08181772460f7de6dfb9806a156d4a8581be6b392141d03eb1057cea08ab0b9282974a28884424a813f04a0f1defd93c23e61d2cfba01621e104cdfa88c3f9df9fd3a662b9d5c3482bec16664583ad94d7a26cccfb5b186a0cd1985508f4607b00c7c790545f97abded2faaa146042c7dd0521e42d454180a0724fcbdf288f2a8d43fe4ff72ba7247f93bec2e7f6f3de6b48d59c70415c487c3e81c3cf9775021e6dcfcc1a6993574b8f0351e79c083b50f712ef91acafa7ac834097bf24704440cc948e640ff8758a7004c4e783eca4a70468f06d288bc53fb444a1ed8eff0d5d0a1fe3a0750af46b2f13e9f9c88784e84a99430bf322ee8352b61f8791d4d1dba27011ae40010d1340e283405cc1ac810bd944860fbb4229aa9d78e86d16dce3035a05f5c7bc2ca8ed1c8ee457374e901b1b800cd4241f5e5b0236b67e0353360809523ba46121eda376374a99f1eb3c55c819715aafcc72e50838b3dab3df4b39bc00d6ff23dc5a53701daf2413369d05fd872628fe546d44c114c308c470af4277c485f
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 fcb4cb30714642a4314627131c390d644cde8eac6b83c39dc6360400dcd5758cd2ad33790474f6e41abd349df6652f6e3149148fa59f9786bf4a1da7b965114d774404d4b59abba7788a8145c748fb526e03eaae61de28ef5691e24a7cee8dd4e24daf83d17520d0dd2497496fe5a070a6d39ad370ac1a7319be1ea223f668090d744ef47467364e8ac0c836db39754ed07c89112ebf8cc91da8917c46222db1e78f7978ab1b1291057621af7341bb8b3643c4de4d095b7ff4b0d86809997f5781cfa180435b12a665a5c7ecd45d75a6638cae2e2023000a1f34d9fba054a82a6be2a4b2a18203ae492f804e68bda2f157e88a2175494bec9cb40f142d2e45695eb9b7a71898e4bd49ccf1ab521fcbd9db7f4943a59d1b2fd21bab8c0a27d7f76a28b8bd5d651931fe1bea75555b490481ea0ee87c0a67b0b32a3880750974ed51596fa52700142d45fd8fe12e3fef616654872c7efd08f07b0f066394c8df2ebf8d086c2fe1de42eeb32d129435bbd447d2d47e31188a33f90967daccd184f51ba4bc4a5085d5717c5edd43b913ae14f43d6d8d6e54cdffccd586d242e2bf3ec362d88e2caa8690e3704ff6e6e7de2d68829854e6a59a7dee163a6d4a1b2ed6e229a3dd13dcb767c664e7ffe649fd70f1980e508951b5ba8cef4e5fcb2a86c5456e07f659217ef84481d65906db61017f7a1eca844433523a13f401cf11ea81b6fd3becedc6b0e59724bb0706eac0acb664769c6f4969834c342ef3eeca15b7257fc910fc32592d5fda096ec62c344c62c82af15797a2bf332cd6e1af19d75702d0cd8c9ecd783baee4ca0f49ee9420892242d0dac11052be67acaed096685f9b72233b2d9dd418962781387ddeabcd6d2431bb799cf962afc8c78685516b266986c1545cc3c1e8661dfe325785c52dadfc9d95a05102ea5a0ad415ebbd8cf153c1b2be65df13384ceb1138bdfb3a75fc10003e5e4b243619c37d8726fef9b81291b94daf3ac4cbabea0c2d165e8dc62f4f77e6f96447a81dbed3e5e5a5be19285e0fef5db4ba8fe8b8879f7f9d01c468c38b9de899be0d83cc69ee00356ef9add13fd2b82306ca21cdf29e9880571d133bc64a2575576081b354641e8320ffe11a599ae96cdd72b26ea55e32b9090843172c673f6ff688b17de3780f75909a982f7a92814cae0f8624038c9bd2aa56daa5e8c2f42ff5a0758c4dfe443e4ab5
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.
