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 9e8fa1d296dd9480ac4a4e99c94437072c89a69e3508df74af04d4d810220fde8101fe0ce96f5a7a1fd6dcf8442866fc6b39e129b903caa299855d99a9ae5310c1c1bb2d02787f0492816d88942e95213d3a3d3dad9528715eb89a15ad5147353364204c5e6af5d86e7b8de38d3c989333229ed93e36ba53ab9b1c3e2b3504d1d4bc4b4d580dcbfafaa94ee5bf9af295ae8e07a26e6027d958c48a7ed177db4254ea72948a4592454c449df9a7d33a530fdc5f02b9e11cbf5f4b8596ff599bfeb003e773796cde4a984e815cc1f7fb09e32cb4fba2c8d972117d291f2254d6f8d11bf871d46db490768d1efc7fc7f82bed87b2f6f18661203d0bae4bc8dee82520eb67d6c7d5426e2a7aa9e4e1492ed23ca5bfe37eeb71d6a26f3bfbecc3010fae9ead586cde442d58a7e2ea6e9b02b198a60498389a8411011eb184f4983d7bd0878c36bb42caaa5c62101a0bb1a16e171036c33a9cbe647d590af0bfa0759de55b868a80606cbb75871290d684a032de656b2d38be30924a2038806874ae0de0b58efa61342ae813b706902a90fad8c99bfcc7db00044dcf120dde60e949727f1e5cf97814834a751179903c9ffa4c5581d83e6801e149305fe0316701b059d840316a18e699fa3ab433f1c07806f953516d75fb8a12c55eddbbcb1f3b1674a7a4f95842c496ca38af446507717c4af66a3761ca2ff47597d68efad70d0ab1df8437b638b7b1a147e7e5035ba033d89564149f6c74aa20a2ce8cecd1c9fcc201abdb5be2884f1fd14f79ae23cab04289cac276dd28ac9067f211664b40ecf91e9baa4b4323bc4c8610605f244031001425915b9786b70619a4735579739089497dcf3490cf7832290e3fd0f5c65470413d8c2bc14d998c4123a6fc75479db3e5b6c93f534643d4d1de6eeea782e69215c32958c43aaf24d156aae6be2aede6206e5460781929bf5ed9a96031c8ade093825faa332b6f14775b744466caeeb37a0aac0ccc35b7b815b1ab76afa6aa892e162294d36d21540a42ea2fe4fdb771dfe72c79ca5616ea32e1d1d931c02482
The In footer style appears in the top-right of the page footer:
Back to top link in footer
View code e0b55456915288fcfee2ab4174b17757be222629f4f5cdd04b7b8d24f9105c06f5feb0762a7fec826a5c337c6a722c8393b4dc784dca5447dc9d0f1b9a0576d0a708ec2151d0ac2baca1365375931607ac7c4d80435ebcb0fda855c351d80b6f7083cbfc7b4c05dd26e1ca98cb4fce721fb82468319561553a6637dc8d8fc48409f8e784ebeeec675b7a9d5c7e038929f6247335fe157c748b6200f0ac50ed6cf9d786004035034f04da223c798246377d564e7f12b6f5a695956836b7ff782e20367e205adb1b2224db4cc74a287d957e177824cc84db4a2a6385efca20cfaee1bf0669eb29fc79871a83e5e30b04914f517c99d9b762984886a8dbb567ab5d83c5aa9a37deecd6a161c999ccb865fdb0011260cb9dd1621d687ecc5695fd06174f63ced2ec84d63c1c9431ce412f82b51b27c37a3e102f61c223750cddd306639ceadb4873a98b4ab53b23c40a9723362639120333d275538a28f2f046491398cb8ac51e6cfd4ba4c2ec707d9be313e37eb90f23608b7a517fde06d8f974e740e13e98482d13c9b585c1ab59e21030c0ccf922fc39d18be3f5d04f05d35228f12d2a499a6a9d0a0c0e3a12fd2aa94589b6766cd14cb4def1b9b97010d33807cacf9da124b90fc2e56e6bc645e662d9c08c50b756de6f80941c6e8228c1341372c764ad630fbac6cb90730921007a6aaa2ee85dc16a8844c08a426807e6a423ed4d68acbb2576bbc2b61e52989bd3de4a1920d2a9a711c43b6520de30954c38a720fc2901a89920fb19d9b9dea74b572172b3b498cc8fa40498636f1d9e4e3d64ce9a174badd260e6847744eadfd51a56684927294aa9d97464f265b7b540dbd44e7ccb07cbb161ecd82edf244d375698c2fb1f2c9235aa7541a2115eb3919180a79333674d0453dd8cddab32a2ba32f0dc714125d5b148379777cf751af5ca6a999ef223493a183b18c17d7c200ad6cc1bcc06a548b8246aeae0b2cb60a8067cc2eca565556497b76900b18731c81e6f08b45f4ddcb7afa4e3af1a0d432f3e4fa5e2283c640dc03391a2bd6ada3c4df25cfff11ea702c477b9b02ae2e46581dd97089b37bf7095cf6bf4c56f4bdeac71fcef0667770b731b1cdf20ef1117bf1e8ab0e157133ad2681568559fd40a57a4299159b16d3f9d789545e914e4704369b45d94d984fda85c1085af19a98ba8ef1c703e332dd24e09b6b1d145018a1a92df20fc489ff8db073c36e4ff7f419cda3614ff4cfde2b942a013439028a6119984f3e8244d60f30c60f4708f94e17409026352c1413fbbaf70917e8498eff3221df686f1315978b54a0abd95e1e9e84ef16df2c0a8000852ce32f3aaeff0fddbe4374d4e10810f21c395d5e501fc38918fa9133e76f6055a7e9408031746b170a06be6da5cba1338606a66d0f801eacc770bcf86cef5cee956256ec0e7d65cfb8a22456e58b6b9dae3e45a48ecaebb207189c98ca73d8268ea574f4a57109011032a7682bd02fafaa2c70bdcb3bf2b51fcd492c9dac45ad4eb365d22c7e24f1c1f0cf71f01116c68c8fac178dcbce2b37f0cdae90fb03eaad4c2dad0a257e10a03723515908bf4651bca486b8914356c5a72cfde030d2afca1a8051a4d81d8db376cc5dd9a07463757bab025d619ab2729f260e3e14631a02136af62232f3a2fca06bd8d0306bd0215887c7f78e42a
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 0fa362a219938fbfe63750c488f9653c4b7382341bae9af988dce9aa912d0cbb33d134c674a54ecb2b9050b5edcc6edbd3120e47ddc7ca346e423bcadc5e953873cf8c0846d8bbe64a6f7ea5cff026a0a029aafd44f2f5f896c2c6ba037d42bbb005dc1b3ea1a1c6fbb6734a9bcb8c6a98d154a2e1031104324c4f850f47059aba444723e796d0e3948bdb4cc4ac4401b597defd85e6d205e09eb6827e731dab2d3c6defa88f48344487b3d39f2fd08b3ab9fd888c2b1ecdc5474fad6ee3b2cc07ee6273364893f64099a12f70637dedacfd57dd1ef9d47fcd6ed52a33a525a892a6e9658071da6cf3343a838b5388329e8954d7a62360f23a8512a7b13753ae8454795be07b0ef8a1ccbc72964ed0d0f9257d7ed5a40f642c0bdbe8018ed9afd0463f1032c547779da826130cb2dc356e91115067103c7cbbd44739407b761590d03da32119322090d84364407e9c5b4a64bf2de276c98abbc40c80b8ec6a7698d5a0ce15f0951c661178493aeaeca2210b63796f07f78c689ea5af65c71217ed23430069fb6cf2f090592a8185af09cfb12684d5865fb06c294d922952ace20ab7d688a998915b0d848ed8a394faf8f516b7041f78c9fe16ad12598b576126f02974b83e0e04177e061d0bd0ab4fd6bb76078b5329e73b200d9006e22e1c5aef0907410d0486965745f7c0c55bb4a5fcb285fe765f304fd6a1de4ad4bc3d4a35b1ccc51623fbd47a25f9f70e2e9882160c3b91c214a96aa58bd667b2c13686d4ec05bec4f75e6df8ceec9d38a8c73cef026b7807b351fef47fa9aa9b88cd238034e571b0cb33811ea48ee7e7f1c3d1c5899d391a0e20d3e86dc1546146c333d6e8d35ab3a6a80db92c45c21338e4f2920e9e7f24dbde0529f0e7f8a9ffe099eae094cd61a4e887b51111e947f6b2310f690bed0258969e3938ec5e82e6f844ef373aa53458fa3078599b98425380d619f8ee9f4c733d35b2f59c7a8982b9d70561e6eb5d1f3fed7b11866bc0211dd63140ba5dd5b3fbf2e481eb313ae1c0f5212505b3517e319fe2a92caff6f23aac40a96a960e834cb9bb4e43ebc5be182f63f8356823e41f67f188ad6877ce41a19c5218c33436fc366062f8390ec79edabf29814d4a1e0eca290efa030a7d0617138f5607c88d24e03e6b6d496998df2c547e1f98a8a2f30f0199267449f702d8aa01a0768281349f3db09d7058b24076
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.
