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 3a69ad0cfee0f061a9559289b9e0fa983d908f011d5e5368de4ffd9d80cd1b1bed05ac9475978aae6d4b60ed555ceb5282030bd5aadeadae273dc7b03efc1cc23f5021bec44f12ae007f533dcad74a4e80389c2705e678a0e8bfab44f6def8f9600f21e934f1d147b9ee65f90ed170b755a6b61df1588bb7aa2d97e84470139a190398c4ccc05ad30ddd65c57bd582c6fdbdeae32dc4c2d706101c85be549a3c443ef790e3e29cca37c758ab72de58f96526feb6bdaa520949145b31ab0cd7a1d4c73e2434f5bac4fde6e55b393c07ae62362eff85b3be8afa90f3bef6b7e1c5b1db004c1e1eb83e734932c81f4a0c632ffa132b21c92900ca124e3c9f17d6c8a37947f3d5bd90406c25f9b1ce7183c63373fc53c88a3a3adc7984c828107c45f54a51876ee4ea40863499fc4b984110ccb6c15cd7fb4ceef2a0640c19b4bab78a178befbe489595af2cacc9b19914dc159b40968b0b60bf6ec4d7bae3d01fe2a5c38997cef774deb494b1cbb364b637cc56d05544ae3f16e0f6dbdd6b84efb1ad967e25cfb5383e1f9d4ca13737b2f6f22acb730728e5853a3c6ec5a839432a999e592432793f353e284ea3c9345ebfbad75c5ba419d02164efabe5b1f01bdf294f8d3d8f9fead632d9d9ddabb36f1b2c50a7ea80045504260127ff75536e369defd30733a90e5eef2a7b9a66610c0b81a7094b24ff9b2990de22e8e593a2217e60e4870bd31affbbf1e2a082fb2fb3bab7bf2af7ae4fc7da7beb16a522405b9d5e81ffe88344a2fb3b4397679ab251c92b595d67438a7b567ba00b2296a3f1a1ca16b7f25e51bbfc324a6896520082e04457d98d15116ebd5832c47d9d3a4755031899030310ca997bca31737e7b1eb7282c7bf9eab5a1068d4914f87bcd94f84341accc568ae847fd8401038110a37b692ef7df38ce5bb3e25d7dafd698cccc045797e9e53629d3b42eeee37d569ac70a7c1f5217b380eaea4ae30516e31824343e96e3ea20678d610cd2531efe08205b6c118c5fff6c278361ea16ab56b1b3daa3ef3866db58bdac696c2bd237c9
The In footer style appears in the top-right of the page footer:
Back to top link in footer
View code 1b079b22306302b72347c2a249947d75228e28975a7db4858d07897ffa39e6cfd05b18c74ed6a1fc9de8135860b8232202cb8f0e4284cb80670106f0b0bf10568fdc7c3c8ce346b322ad2b276e3e8f74778007435f9adab9a18852125695567ea649c25dad06e38fd649cba4db2212aeab3d5ff3d904f0478d46f235ba0586cca748e617752c7ff862e32f20b42590b7eb7d4335ab32d823795f57269ce6026d3f0a42aa4ea9192e2de7e140931c69b1b39a323e53680d007bd729a3d4757b1e0757d4377b714cc02733445f788dd432760dcba99d29fe95373d1779b27309069c1b6715fc23cdf2499c8d6f081ab79e77444e3cbf66eff676a511021c78d4dbe1e1d3df9a25e533826d33e9207754ec3adab95e23770fafeb4bd223a35954689f99925565f7397f2e7c85efb51cb1dca695beb8ddebac3579aec32b51f74ddd1d8fd030006a79330bad79e05dba1ccde90ebb893dbe52a567e9b67e801b371f460a69cc2a511984d6eb74c4e70f2ed8acdbb4e78a6c4502c14c2a6cddc7271b479bb3652a13d3b683af8c78b1285c5b350cb920d98226a4704ccf8db97c64c48bc555c5f32ad95c9a1ddd0815be80b6431b1fe27f12dd006a2a5cdeb5f19ea657880bbf89dcb0d3ef7a569ff4e03c5a0b77a2bdf8e6d6228d6ce17059ce9c2f2f36278fed69296f18a0fe7e485075d19288133b50000c3e2028ac4b88891bf2c2d4110088efa24fe33e01a5184bb017537fd785c126704918f30ada9c4314506f0cc61a32e375e962d92265b383798ee6308e2aa7552adb2b76db077b41c1003478d81a0a2fa23b643a1c03f573fc8fd0d8d4691b802d8415247726a341b6928148d2a93af4e92c8a2fb6b1deb7d59607d9cce07e92f97a1a79f34bdc5183d38b697ff90423477fa5e96ed8e783eebddc49e0ecc57b6e667582544f8016447b151325c89934e15daa4dea825e74151a9096b9f98dbeb7fe7bf57600ea04712f15cab9fa20b457fc308b91d01c5c4c8299d21475c03bc675b00ad214d75d281ee720119336b357f9252d19354f6cd5a848bc3a7ba5f5c8e81cc23c9f411450b9540df5f74a691593f2dcafe1c4dcb9c705b6c4c81b3a598c18280c95eb3921047a1a6ded41f0008273e6f4c05eaeb93c717080470b2afc4ad7dcb1e44671336348b9bc072d04ec61c34370b4858c2048a07b0f2ba43b519c4e92b28dbc3b5ddc79d0749aa8e6bd6ef149cf2309bc47667d5da0a60e717ccb2c3383b0521b998601747e4631ebea01b07b0f557c8e920ebd0153c77daab4a38c2962fcd11ab30e349e2c90fe8cb36e1dd348ba45fcdba2a5b50d092931aa258688c2c8db3f44750963eb17588f573ed7fd9ce29083393408e8b3293b12db2bc43deb04e49a0d8a6ec5e5874eb307d9cedf07249f90fda556d09163f28cc2513d1c1ef09193258a8f0a5f9832be424c429e6900ae848484c668ca1c2a65af709fc9ba33f4458184aa11ab1771282e28e5d489b80ef610be2b80a0a334fed6897408cc26a7490e71eda8516bcf64532c7df46346f2afb1e06b2e62ab2f26e0df92fe41b348566fbdd803489f2d933b9ba799e5d30047b7671fb3d1568da782e3ab3d927232e23e07ec1772bbd3f399ad444671fdc23ab6db6999cabef7719e644db83c28709f358ccb1e763e39bcc2c1df11678cf300bd5b
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 e3695cdb947b5b27d09ece3fc40c5801d8640cf417d47ad3053f3ac1ec25bfe8c39dcc4b685749bf8a15754d996be5542ae07e3189a99cd9471079341e00a0566d89a68d61299dd940517a956cbfab1174f44591612efe46b08592240f3e97679543ff8acd839da47313bcec50e23ab428fe9b937617146efe8104d0c942ee2b4850e9560c2125074ae3f0f25105bd60cdfeb34f689e97737141a6731a043b7fcb6b49ef3012e333c5621b705c9da35c1dfdd1c5d850a8e5fd4888c1a77b15172432304a47ac2978be9bba2789cc8360203f0b01f36b338af30e695cf4579410e95bc48b9caedf02f18c58157d2d3558f285701ca64bfb674781b384b986cb7acca411bdb560e2f55f97e6abf24c1a01f8ec2e9f96553a5042884948f57528480a6953fbb3df6058875e1c48341e784ac3aa5040c7de5716d8ab11f4bc0c5e6ce4ac151d72fd19d75576d57a08e5bca690e86d73ddb867cfe1aee9404fe77e52769d22cc15836e63bb55752abcf0c53d1049f626222cfdb6494278bfe0663f79f0b64e2a163fc24ebdc2e87a838d16760fad40cf583827265c9bc4c4e81cd1b2431638e5a1511171520b709c8b16d8bb72629d7ec00fbfca07d6ea8811511036606469849147ccbc777dadfbc06cd6c43fcbaf657e02d32c3eca4ce3d920d9bd32c2217e985b81317d57a9bdb813558d39b04037ce37e9b43d3354d97f0da3261cd5711a4b437f4573b41401af113f1958c1b15bc3f23f87e809731170cfc496d1fe2c5288808264cbe08cde85b680eec6f12afb49daafca8ecb8b6b5dc7cfc5469df56a5ff03f2bf74a8afdd3dce5cf9bd3e1994a9f38243fde33a7560acea481c6c51a24125a11b3f36c66c3d35c41ce510d06f4d382b5aa1d18e63a4f36b6602fc4dc14fe413343283665bbcf3a2a2e5ff0cb4fe4ca27e774b6771746050442db8fbd26270f092a303d046616a9530c35ac07c26094a513b3daab8dcceb5dcdde083cb5307caa51617e0e0d815578040f70b1b282c3020d58d2dc4c304e4e6645d3952e72340d8614989a9657397cca2686f9454fc01a26f2318d9d6aeee8e0be3e9111dfbc291235c125f236458e92a03732573efb23b2b80390f8c0d7fd7f99f1522334233062838f1fd42277b111bc3570874045d7a173351155fc55c61c24f3ef25ca2a6797dadb66863df86916192a6973257e80acb3f9edd49771e7
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.
