Back to top links

Back to top links can be enabled through theme settings and provide a way for visitors to easily return to the top of the page.

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
1aae5bac0fc54fd236adcce94309d3095353fa7deeebf870616426baf043237a145798b5254b02e77e36c6106c794f822ff1d861c913eb96daa9376c3c421a4b9e21cda6bc226b101d57054f29fc1792a1285f472836eba78b740fd37638c786eed8d4365c8c1cf97ca0300602627de237a23a7c5254182c2bf7a640f9fe793912d543b08a5c1c64dd3c4f008483de661ec21ac34e305bad7b55a10c57c8f70a024b8f844bb9bc6b42d51dce9468f969a7958d7d0538d88a1bcc9b88f177a7a9a9273eb2b200b5a99a9bf5ae7426fe9d32eb3e4d2649ff519f01e53125a5b5c6cde2b60bf2223ef28ee1b0c7ab059dc101acb5d159acf96c6e1622c6190fba242a3b416eb05bf619edf272627bf65e4b283f5c66a215b8475b3ab250394af18e1eb11818715205b5d9e80e1c5c4ba139b6e2d126fa09d3f711a582c0c9805bb642bf9f5f907fc3a62e6b2d43f2f700f177db6d299255f3dcdd45cf8f57a5b6ff60c7d28600d28c51e98bbba753812757a4490338b8a09b446ffe77357318125514aeda467a8862bd90490a020fab4efe4f6fd2137804f1e47047e6d1fe712a06adc7a22ab07ca5a417b4df3fbd609f4ca06fc301911e53b684366d7628f6014d53b0081121f8dd9205b9ed65f5b74d316339bc3fb69354e78b9c65262de2cc3aba25fab64d8e0226a24c7bc7caf12292ec6ef075a58f2253cccc6ce410e9e8b0ec90a71142803cce637d56e54533062455b7e72e7b418fb261f07b19e16ceade42a985f813a45f8d55d13e82879c930b64a3391ed480b774504e9145567c6848471762cbbf67f37fbe502e5af806b3239f6e13d6d19423ca444cc47d8d8333328968880e58b1fb6385f45083e97abbe12e119588ae5d563adc99186c450d153397147dcad7e799681de8d72eb1672829b6d09e5cffcf10d5a568009e3e60bbc3670db8fe1b766592d346d2f4145b9d8a8125a25eeac641d05aff90fe3f8f77b81451e28d657e367ff84e6bd65cca8689019263cf547a139284a057f519d6dc1f766d210b78c13e695d59f38d6ebf9ced

The In footer style appears in the top-right of the page footer:

Back to top link in footer
View code
4c391cd43b27ea77e5284abd108151bfdd95707a74f910613f25fca29a9e7cb39dd8ca939fd8feb9d4d0e1545f1ae81bb0580ddb8c5e950b2b0c6390acc7666409750145d3cd79570d2188eabc6d3a615b65f9ca89193529d1238ba5dae19cbbabb9ae5f2b277705878a522689dcfeb631deba843ddcf72bd8841e375a33372c7132275bd232de5067901827927df35cae447119faf449e138742842dd1f332623462b6708406a5cbff24619cd8526c212797f65a90b77c7ca87b365a7a48afbf0fcee37e9dc1799e38ad17079ee1ce99b911aea9085c5c7617b15e02e5c1dee622c43192f954e9c230b371033f0f0b999446cc698848c324c7a93cbdabb24fce341f026311a22be17b9ace5f186a52cc925f181bbffffaf8815be4b8dadaf694f317c3efc79271087062621a191f30b02e9ba142794c2154a1efdfdd3fbd30803c3ff9b22830ac8c36b884b8c45f8d290062c8373227e6a0c651272c56094f43e1a38404c9e603fd2ac0b1a28a7f633c81c82d9c2d4596bff94680e185d1efdc18999adc2ccf3ce2e39d1aebf95ac6affe3365754297dd830bd0c5837cfa50893b45c52d053a6572bd573234908e48cc009bbd87af40672ea3b7f0f88006dee02b1da23055a367bc0581e1202fab29c4cdf8a49f5251e7cd4c5fd143338527457bb29d5d2f940c1948fe0b499f7194ed8d4729aad7aacc3819a7b838aba60336c9638d9b9b25c3cbdbd948434856d729be6ea4032c774a2e33ed45378aa2f541325608db1b5f21ac6dd5200730efe59991f8bf9c032dec32558e43b50b2a772b9f34c5f48f36ec8ec998793ee1dbf8e78dc8e0f309c81c81cb951fab570db2bdfd413ee383e661a6413bebba6202104f016f5f729f469f222f41aeedb49952a7f50fe3c1246ca64a39703ca40fa379b538f0e2854a1ff10d602da5094ea9251bf757c03b396502dedefd0853e590810b332a4afd1d87cf85115a15cb8b8a217def4103ae5cc594e60da1c9a70d4071587173586be5ee61a49d15519d5f39b39db0681ad6194ecc5fcb987221a89d76a253c4ee36c27b66d130a62edeb07e310a2404e5bfcda795656bdcd43084cbc564f2ee27863449299b736b66d63daf7461334e11af7ca31ac08c45feaf0076e5d64719003a23ad9edaebd0da2e02e71b24f4e1a5a230852da04eedbc547d44d5fb7fba4e253861571c7f84b4a3eb7fac297fe7b41f9d1b099b4a8c8f054d33541d28fe0248502082943fec7ac7c9ac812e6d3129261527bdf93d9d3e7ffa94370c40deb1fbbe564358612f4b8e1e66aa390c338c093c3a42bc786f4c049e045e28f2156bfaec495d4c6f047802ba2498cdef29921355c2f4594baf2aa911d48c965ab00c0e69d294c37486416ea221a581a5f280a3c3dfaa8fe6ce8094e9ce909bc894e52b724ad1a5449613f084991967ae55a4e9109f13fd763e793eed5b992df0e7bcfa70a3bf1ee8b960b7f307ce3d7154d7ce97f5915de2e593689a2ce015710e12eb14e8ea94faf460dfc1da047648421e5e1039c0f9920e304a9a9d4331c2a3361b1e63f3f46bd95e86f82f5d3806e626acc069fcba28b9a2131b833295d34c309091300d621d26f23ec4a0e79540a6cdab8e362c9c232a86e8890e424c9a45667845ea15cc469cecab8743db69ed7f4e772f85dd6cea8ee35eb038c9a

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
0307cd9535e572455b0b71eb85b6d833c0349b32c7ad541c4b42a4d20b6f89ffc1f1c712eb32f9b0b2353c2133b4cf371869f33f41a77fbd7b98a49a816957de81b8172ce97c368509088acad29fceb7ec461d973c939191a75c9794a0714cc1d9f60d1e50245cc7e6f74c66666ccb3fed66823d82fbc056e454f1891d452705c5d93c92bfb8b27af973f53e8fe557b0f60ce10a2f8c34ec25ce150c31037db6d0877beb7a8cbabb796f272cba2233665f38833bb791e543299d48f3471183c993b573e69919aed6ed12c1e0d53b247e65bff6e54ff1839768a3d2f6c6a0f6841eeb497f1fde3be847f42636169248ab886f42d49d8c8dc10d72aab1f9306d45e3b7a6a3d7c7050dd1266ecb0854717496b0e1597b4eaca9ac7e312e9600062a492173eaea3891a9f683b93605792ec46844edee2a2407a1ba704947ba5a8b467bec3b8ab5ae56322cb7d4733e1639b8a421542706180b959cd44c9cdc7cd74abaa3ddeda2dce2d34859268f0b6f3035f2e9eb0ca27e50f088d4e61f0734bd5d4dc795fd467d76bf3fffda0072d80783d320bc3a475e96bec48b24f2206ae4e59bb3d3be78daf98ffd282ec8ea2ec36c05722a148adef8fc9928465c2cd6afb31e93b11955bb25015b519d23b72dd74935d14f1264ee9158c405fab7297060ea0eaf9baec912daa7933783f36ddbec67a951a4936f4b9f5137ea18e37f47f5045cb5cce2fdb9b64c3d43f271a93e9d23c0d4b7c31c6c8de19990e839744c9a880794318b5125dcf405404440ed71e801a2ba152ac816c2fb6673bb1e632c5000ff84015420046c88171b20f359eb518eeaeed554d0a7ee9b6064221c16aa83868b6a91f972da88b89dd63f344759167d64839ee875e927fd30bc59ed118d1f8efa37ceb9d536ffb564e96651febac9f2af1588664e2b6a168dfc058a731da607698e740cf06fc540868d9879cb01954d765523ca5f5997be820e83cd9880502c51359fbdb1f14e50a5206bc76c0342741ff7a563b9d0678abdf73c1d079ebe0dd8b3d5691b3d090849ceb6b3c6ae2e66caca9d9657119611fac9d9e5a565338bec6a1b2747677948d932a2deb40257e66478dc94136526696b19fbc6f6c7720d3ce9ca108e244071cdc4f5066237f63d4d762a13c38e66b1178bf9b9f602f039f85e45b568b2d317c826a8da1d23680b6571af11dde4f9fb8d15c8ae60365b00

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.

Related patterns

Breadcrumbs

Breadcrumbs

6 patterns

Pagination

Pagination

2 patterns