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 e07a6391c1a8efaf213693ab34950b7679b05a3d4cff8757d75c577a6edf6c6832f67319ea3cd7a8e6d2eb51b47efde15d2aa2230f9e32bf21c40a42a89f435478f2459e626bcb409d28eb5c9157c29c785cdb42ccb0839ff678267efb872540add521e9cd811e727044f235a54730a0ade769d35e7c0656064ea875d00a3bd66e1ed8110ee882b997c346867068357f056c98fce1d716a40c9f56424b6730fd6cb47f5f71ff8b13ccadbff8ac3f8f7b72979095b0aa38ee7ec338623f2f3ca3b999964062a9976b5f452cac7f97df4ca29ba429037c6cf1c1429153a6f3184ce39e03dc27bf81eee8e56112da81a1999a3a907099efd6b01c58f9aeba25c6a56ffa0e9ed69d823ffa745c91a4d76b89c92bfd04999bcaddda97c90814bae11c554d2e0c3063dec180193c5d74bf82c51737d3b6cab359b0d5dd0c214447ba525a05646c3d11048b75151f174772adc1d6575ba70064981dee65eaf9fee8c7162287ad885ef186ae04b538c0d684b70f5f6fae54529a2a4a1111da425bce8d43de8cc7ec5d6292cb4a3efda853cccd5b55bfa963149798bc379b56c8923be132d0e23cd58571a9e8a83bb2442a6177e27a91ab7f5256233e6eb9f451ea8e4bc8e877e8bff56092247febcd499437d20641c76bb376c096fa93360d095e3fbad313e6dc98d568c81a11ffdd5dfa818cb62786e6fd7c04ec9c3a76d2cabc067fe1e9e3e122b32e5938970f5e572b5525d27d37fa42d579375a3b14c9569d0d71896b9105f6a481152292bd4887dafc7fed75814f2bf2a0bcb9be50c05bc9c9bd4ed7f86f1de1a4dc0412660be811b7967eff34c4924a831f8e26655fa18be74e3f51eaf434cdb879fffaf051fe99b034fe333cd799517b0428e36ff0175b630500727876613b2b675bd0671b3610ab0fa6842042c5c2b3c8c1f7669905cda1e2e101df7aae4e66b8155f9656e6920918806a3234f7da0120b60c8d334af4a633d210683e73fa4c7967ff6fe75f7a7ef26379c1afe5ed7aa08b65012fadda48c9e9b1dbbce7431efa7934993b6e55986299
The In footer style appears in the top-right of the page footer:
Back to top link in footer
View code bdb0e02671cfd94f88bc26ad742f2fb522c28753c9bc2d36eb09d49835043e02b366f36c1e49207f19e7e319e928cce8299888a1403a5b6a3fbf5ac2460d660482ad40a31382c9a3e8e8beba4e28170cfbb66946ff449572d8022fddb6d298d56223038a5931490e36c2521a57781722845e52dfda111d4f43064d962fb7c91279353cc7843feed8b86e02b489066a2ee24305f87428df8c8c512ab9e859f2ea73216c777e15d86ccbea48ed0a26ae1139cedde05f82cc0e56eac0d935bdac542a2900401d371f0c09838780a01f5b2f0173a67457e43ec0cb9e107e50b0c6a6d5b47b11d0a773fe64cccf8e407bbebd4508ad938afcac4bbcb4f16ec50abcc996e08eb50500ccaad8ccb104be3b6ae0d22e8181622c8491bf38e017f581b97d1726537824cf6368a7d3fd68effa125b69175b2bcd2753ca56c31d6f1e0139dc31e2f5b9cc97c935ca42f6bcb63d20d1dcd9ec0b057d6692f1126642b08e13837de2696a2de3fb3e4afdb3fb0dffff090eac5b6345cdefbec564c70f689b6e3594e530f5ea9a2e70f53c51735536e0dc5c3872d383076e221ebd566359ed7f1ea6bdf4e4b65fa0f49012ffb628b452618ac002ce62237c4cf7aac3f6c9935ba310a89bb66c6ec7298f5da07f06311c9abee181f78f9eef9ad47093fc74d1cdf4584ce58f98b85336c603a5b2d3a80cf967bd36bfd66052f3e0035500f73671381e9fea9125e5f8a9b9b245c6ed8430f722d1bb011be270cc24025ba7bee0f21e607900d337c242cb80991c5fec0aaf700272928f7cf254710e92c09e298f8993f2e78cd2b2f802023c745e512f1c65bb01b702110c8482e38dc714c350e6e235898285459d53a404940aa3e1406cd69e5b0ae65dd5ac8f292123e48032b40517938b379a0faf6ee747f59fe2619d1d52bc1ab71cb4705ba8853c9cc4ac33e532fe9233ab78359210b340de5d488ecb087ea87711e5ba87b194ac494ec278e988557deeb7a933e29a7998f12f50d70ee2459b9cd80d35cd804fa10969da0e5554c4cdc5af7221dfa58c012ee7d5774647370ae9086cd06b00a53cfce7cd6735a7263b85e65dc30177da38d1d74c0aed20feec883c5779f263a0123ead03cd7c4229fd9aaa82196f9b3863ac13efc5dbd83e0f530a9906344b561d7351dbf3fad6f17b0f5f3dd6bae207839bd8e8a297a9b914c64565dd6a60d3b166d8f8e69a5d33e29e07f9eda6ba1b58af577ee6a33caa1980765861915030955e9aa0d3649dcd1780899c1fe52ab95461d9c3bac2d6ea9d780079b4ded34ca41a436fd4b6fe8bcbc8dc9c2f4d6d22655b971fa7b97e72e59efe3179d429acdb083a4389ecfb6467370c1f566c13fec33208dbeeffb0ef136dfec4303746ca014d069681f5ea4760d2a28c84413252ec19e43282b8f37daf588e04ec9fe08f04b936893ccd81d6b18605ea2c6d0f3a749c6dd8bfc1629dd644befde223213610765d5a0616332b2e78569bd3deb2e6953b37787039e390e4794dc3ad0bf2a342dcb514abcb40a4d373bd45b1a293d240fd7150e84382b2d1e54161b4601c6b5087da5e7f059e4feb442a98ea8fc3f305d380d8030f864e1a42150fdc679d928d450eb72473a43e6d97bdb916057eb0f2478d1854a56fcfe011e3d84af72ef6991bdc06fb6870706ab0fbbb680fa3e714245dfcbfbdff
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 37de60589becde2451795ecbb3d4d6aca5ba0f209f0396bcd4c00897d2e5b907b44d88415f6e966799e91444ebb6bc3ce30cb1f9e5a7863dec487fd265f140e8d31f161c13f3fbbfd70b5c753e15ae11099a11c340f669b51157b283ca9a839f33862bf8b5a447edbd3489f01d551473f9c42405020581d2bc928d4c07c4ee84e59391a6dd4fab547a06590d86e3fbf6fc67f7e8ab1a5fe2864d368da276347e5b2ebba80c8218024f67baa5862fababfc06d8c4673a26b52a86ba2c786083b2f5b7812caa47d56d41721957a651ed303cc413da5f70e09c43ba879fa13709ee8f4053910072320083daeeb70bbf147229a741aca0bc11d6dbbae0dd3d30354b419513677376a0f43c1442b6d8771db7577f2bdfb00ce81d9d0fad07e2b9032c5f933373fed13f4a21dd5b91bc52ee9f51744d0165c3b1458d903fb97bf151486466e5d52ed4a7c79924aede236a5b1b4274734491473e6e9300b1b0ef47bd72de1d55320ffad30527883918ca7c6d028a53e6bdeb11d2d6899fcff307df5641d193b2d52b571db7cf67674a606d40bfe7b6da9040f689d789ec5cc82d17825e568be77e995a83bc4269b796ddda2019db6071d0707dc12c2fa55e216a176d62918ead4a904fc82bd6e557e0dcaaf7576ae2044ff5b65919075a874afa56c6d5d4abc7f29cbbc2a6394e4f92674d9be1525a82d000df3513c3d5dcf34699487aa6d0abf171d2c81dbe18e697ef136d0f870d0587b32eede052ec236ba77cfff5af99120e462941a9b6e8b06fe4b9d4f3c0db1db93a92db69b02ae5e76fd17c42cb3b3417dd55a4e0ffcc44df2a68e02fdc8d2bf6c5efa4d76b7ddfad5b7067bdd127982bf0839639e1f9b675a68abc06a7f0ed466d5e657d254dd4283b4f1c9a683415e2040cf653f889aeecb68754e8cc55914d36a3b024c2ab7af281dc3d8d78154de2d6b631fbac68a7bb23ba955c96fd740d601471aafe55c1767786cedd773897855296b30442d13eb51b5370a31d6f63000268307dd4f3b70dcac7e5b3bc6494270ae5fe92abb0351042db39937d47a7c7a5c44a0c6491f749c002b372b8c310d06368b6ae11ce8ceb9d28f946b5b4ac5e473d81d2ab7c66a7918e94b62e2fadba0368d5e6c1548459440df851e0f48344d946f5f38d62b1533b22da991a84f9e253381fc76fc282099afe235875e65ca85387ba81dc0c13ca2a2008f1
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.
