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 a544ee924563cc7cc58123642b291ca76d4ac7bea146f939f2edc24ca6d8cb62821fd70d8ce3f1d40a73442a41d64945ff62dc21abc82481be03c064349f64f4455442ab14b630363b9c35b3d73092fdee7f7ac7ee271e5b3ff6dbf315de781f1700ef89127c613f8890b2b74b84fa368a319e77e48d1babc60d5b127872e99fa64beda26a77ab941ffb990685fdafb9041abff6dac05fee644e8d96364530edfdf6ef96351a8b6420e9d917af4c198721fc5bababc28947573ce1e0fdd01d4dd31dae5d570acd6664008c6b7f428b3f56a4f9a35bfe99c86d72741c1e63abf8482b246db31d0a099b6708bcda3f0680bc7b4d2ad53d3cb612509782b0ada8ac04670612d614d4894864cafc4742743715108599f218330c81daa477eaaa15c5b05cad954e3c28e0a63db727bd7c98bb8181bb0ef91190cf2fd54bd17375432b451915650b5a2c1e55764c92940951994be9ff1ea8f9e3ef901dd17b3081c7cb77e9ee4388850ee86b7a3cc2e77082f4e4e3e942679ef3da9c07c0dc37a14c6c606761984441517ea44fabcb93c6d1989f95edf77e520814433fb6aae5a9d12cff9c5e34dd8e9f95cfb5e0be39d05b6b448c878093b1e072f1fb9a3710d183b24260a390319a8abd66f604be664bc9d8fc1a31024c491537d083ce4efbddbac41a4bf84c4a4e959a8d59a3b13bc9f4e546c13af285578c7c499abf372724efd11934c093af6aa339c347be4acb4cbbdbbb43deada11fdb6c4d434e91e838114e233b5d58129220ba231f903250487094ffc58b0c316d645a23be09aa47c7c44e41ddf3860d2724f6a7894da1975c33d598a816ce60ffc12c02fad70a3ac6002194a13c4076293ef4bf43c231b57a8ea0f2d4c343d60944c9a025df53c7e989fd664b67053cbf1abd1a53a05b86e065d0ccb5112eae7e7a80b7a1b4373e21567b254d2a2dcb5784bcca7437bcff57f6721efb9ab1c3c5096467db142bfc2f00328b2390568f6df7fd4a4080544f34d429145a9f93b261eb7bf668f5df6d5a9825527656a9790c5d209c583464e7f3020d
The In footer style appears in the top-right of the page footer:
Back to top link in footer
View code d835dc6f32c8f8c50352d65bd7f51cd10d1be28df8ee81920e476fb99fc420f1a1ddb30a10851a1c415fe550f09307d0219834ff676dcf34ba71fa4c4537c98f873536f03118076d6a52435be786129719718d74946da05675e018b53cfe10107466e8bf44afcf55eb5d3e0de0a9fea97fb178b64c46cf9295a83d9c747ba43ea35643c664852ba803f8c64dbb6f3f309ed746c9d1866cd278336bbc6941d9d86ca7fe9e7ca16241ceff2949894acfbddeb698de2901c2531517dc52eebf20a020bdf9546f183e796a851d063c8a513a049da0f12f79ab71289f31c24a9ff72b2f7c825dae40d716c22abb8f53f823592f4008d4336f85a1f76287be03b68ed546fd0148a2f30c6f43093e564440014f1cfc9876d657c931a73795e4eb860ea5227d71543b68a2c30ff4f60809f21ff3c8b24f44399812b7c336e6930856aeae1db078b5fb09aed68087ea81145f979e924490aa6533f34d30d2a7bbe79d718ae71eba50c2e6d7756b1d2e25a5bbe8f0cc98fbbfa878ff22870515afc455f87df6d158d891a18fe51354cb238d37326f4ba6f9833151e6dc204eb965dc5afd97247b8eb0d63c94eb2c413eb80d5cb45270348d0d0f61afe01dd6325cbc584d9a7dff82759d6d42ae21858067b645bde74ef58c25f99a698e73f34f63f821b9f3dfd0b8030cea61f674fc178f4ed51bcae4bbf9d77286ef655eb3fe85c77d36eea23890714016311eab6a3d0cabc5249a3a9024caffb26b4213d34900f53ddf15c6e1c3d61fb7217a25b297b7d3a534bc4955b42ea2dd75231fe9b0e9f8c2ee6627b89b1f92c003d6c266bc65b067c077411041319d43a18f6d94296a5feefb471453adcb3dd226d824013e259349e0ace1680c72b5a9f35b0a2f618c49471617830afbbfcb6b776a878bb558dd838f2b1734cb1aab5e24312bd53f575e7f7a4bd7447b4395d5d8d29e8290b798babfda04f44a2a4cc91f9d59fee6c3069693286503cf6b1f772236041fff9aff193f3069aab4b6f57feb90ead22f62a8b78fe47dd0857920a5fe5be0a5c5c30939d3f2cfd8c78505d0c3ac03b7a3321d5895bdba8805da1a540f4a957cb9d2f7571082d19d14beb729140897b6557892c8db429b58df4f211063991dc31ade2e83905852365363347ebd8762ea210aff56583e4b5e54fde6c47aef890df5011b9e3b4ab37635ac2a040720237b565cbf7671266fdc8ed8c08216d31278f4a4a156e569df16c22e758573a6f91144dfc3ad78d4a881810702301765840861119ab018a4fbca8cb1641d2816c8b9d1ae488993234db179b9cb404cfd08d24c737d298e56659baec2ddb2e9b6e48d57299408a447cbc209d03b8421692a667ad61d2dce8a81e8150f1f37ea3d5223d877b3601a494fadf4f26bd90c27a9a8d5545d83d9f598f43da18ee2e27eb316af704f411756f69c49d4817a33aeeb50bda2161c4fdf8106a7ca5a79805d9a791d161e1e8a8628fc8f346adb77df04eccda689ed90059fa42757ed5428a777d411bb8e73a07ceff748ce60b97647731060fdacd3c7e626118e632e2b86143f8d03574b3ecb2942ed7f99d0e7c78164b35bb63a43fe7cb593fff1bc6999303f9f0460ec31c095240bcfb63e52c251a81d923e6b7135dd4be1e92ec2afa62f8add80547b21623b7fe66a61b8afd2d93432c11cb7bde974
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 199d34f63fe39936bfca268369a6c85fb80fbbb8444ad032e3f589250115019098c8ad8ea8d50ae0329190e03910e4c303e71450dee2f8d2a12b9d1bfd582b19e0671bc995711b5782357335847dcb73c33632052c87fe4105b2d349ab6e6e1297f1dd9786161d5b4c7a202bdc17ab135232fb2cd7057eacdb491420b9c2d84c3d2ee022cc01f254640f11ba1d5e40eac169a96b38f1a3e05a0baea3022864402cf76ff9685b29c0a2df76072002be140738db0e77fb66ba93f0b18244e37a7fe722ed23c8bf5225892e30b03c28d7ec14b7370e93ce9c908168ca1928ed819bf7501a391dbd17b117437b3c986ef5e499e3becfc1704ccb099768e087b62e49c37e2524ceca87cf5d0c058ad9a64949c30c464b39c83c8285b7f43b6828b45c573aea6f3ca426cb803bf657518684ae34ed378b860b4d4ffa81eabf6a8af4ad3c7d7555fcc49f1eba93de7bd0af28910e941293151f7e33e68a19fd89960a1ed394245e8e2ba1c25ec226a2afb12c17340d45b50df582458ea20fc818e095f3e676018b68fb8ca920b55c355aa8a16cb82b40211d7401dac36278d35d73e0d1a6cb9d9d6d42fca79a5aa0b2c68d6fc673454b8c05bbbb0f0f6d19a59e7a0ea7650d96b4de60c400fe96b25c7e2ffeccdfe211691ecc4331367c8d5c6deb98ac12551507f3e2be619efcf2924387db2324b68888c3c1c47dc3ec177e0cb41051923d1a1fa8eb89cc808c491ca9447008505d72a41334fdf076e1e4467b7b7f4e587362fa35eda8798dda274fdef027776ab788a8c9dec67cf7771effaf5bf7bbf732c1b2e92efb3097e0b59e272e70bbb8cab6ff2ac4cad75b40f7feed21d4d033da17e0d8bb6d7e1a435a625b3b33394f9c9a773f9e2218dfd4071b3f3e777ce4f3a095b9a47a4ace2516cf88a8da8a44f376e742ed7cc76c4225b53ba4a426e58c8ee0d74cdbde5e7acfa7e6798613358a9d7a2ceb98e511016b8f241c422f21d5861a39457d96a32a4ec18cf26d24b70c197ffb6878c516fe5ee4704d156f9611f7ac8b764f3d4774bbaf4c13a8462bcf7834ec6a3f6643940de4402ba92e3778550a6efdfbb76984be56030a715a0af2838ea7ebabeb952d7dd207044e928c9dd2c0577fb8d136078d2152187056656a2c0b1045f65fbb9352fba27dd94263824f09614fe24358381dc82c9b84b3b84816cad048117c0a0a0d61ed95ccfb
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.
