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
a3ce2bc5e0a8ec3d3e40d58f993b8ad4614ced8dd3f1b79d17236d77172df945540442ad128a08e4457e9ecab6e913a25dc967adea3d2fa85296a88b28e7967b6640ab75b6016037bc574bd653431b6089587f4e4238ec61fa7f5508bc72c8c2d57d59aa16895156fa70e867181d44898b7d0b2a9666906a5daa2e3f0019ae2c52f333b5c494d5c384256d951a9f33cf340deb0aeb2df4d32ff2d1cf7ab69b49cfdc00641046be6ebe3cf4cdc625e9fa1b731de5412af834350ddcbec7cfd5dc42eb14d20371743c3512d3c6d1ecf2bd99e01445473c6106c8a4d4aee64933df778098c0becef8bbe3f101841c490a3b05723dc46f2870ed415c181c2d5aefa232983c4539cc6db27c075f6eb11dc2e73748abd445325e3172ff186b7b3c9d159d3b9aef008f8ed6f4db9d400631e745d58008fd5eeb9e7a96e87766a9656ae844fc1e9353d88fae3a8810cddea928b55cea9795560f85d75e4a37fb35b59fab5b4390555e63450a02a76e8e00939294eeb974308a44fcf16a69471b280b74ebae847b91f2a49ecbca71a5da64476198fdd1718b9ce128d97f314391ede3173fa182e724692a96aa969dae35b3240329b6975a1f0132104d682e5461140b62326cd2234fab93dcd44283749b6b95632c53de815d6660332c85b8a6b1f0885510a21cadfc0335798b3896f3a90f2c2f1c04ba60f25057cc0278807d5682b4d514e3e0d7252289fb91d6b5eca71a1526418fe70718b84034c37818464c13ccfd61c43b131271434537ffbacd140a59be61944d6c3c695ae12439a041d5b269d36128db17407518a8c41515d02fcb2215efaa9871b9e7d794da0bdf37b728b64fbf68797b0efc83deab6dd2ffa73fd1bad5fae54dc36830cad4937c8038ad66e80d4c0f630efc2f65c483dd26271fd03f25fb48cf82232aec67f1da126f2f1f00b0a75409497b4ad8d4540887dafe090ffea84c4695db2f0fa12fcb1edf8488a410c95a7f84c587e6d7a4fd61fbec1fb7a4924b90c5bd967b708210d9fff0e8a1c69d570f6545cfe53d9936329fca89f2ce

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

Back to top link in footer
View code
7dc3a3b2f4ea7aa76ddbaf078f0ed2056ed7e93b1262e7475b2a3123bfa491052139983f50bf513d50b98e2f99cba601a3f27d21af24d91aeddea830ab143741cc03facb723653ad0d1c8bf1c116d4a1d52a9bf87702083ef906dd6e6251b66f0ab5b5bf97a9eee0272fb40689a3ec40b9b0d2703166c364124d9fa26bf9fec7c9ea16500704ad8130eb55b0d7e5c23666956dc58a950b755f4ea9e5b907a83bfda2844d84112c7170cc8da0803429a5b4280e63d633ea75363864757aabd2760473caaa3ea9902d373d8b9503079a6ad0d7504f295e9d14de9faae9a25e8c6f600f1a9e7117064d289922f97ec7395ceda259dfab52002e7819d5b1043e2e26c7505e2640178add66804f4834770e9045942c002d9b8ee8ddc2fbb90679178eeb9780285641832e9f15cbcc8ae3bad0fec5036d29e446f978cd33ec6661e684b6b40380d5acd0ce408d9b56f4cb8303bac4c1b2a92976f048a6ea2d9360d398507df2b6a2f17a648384ac2e99273bd59a0472971654bad56abb0b5c23ca0aca389c923cf37adc486897299bf77b39589faa28361213f9380a8773797f8599ca2381b65ecda4710f1861366412aec57c19638203ac8bd767116e0952f4c0ffe6226e6444cb75a6488c4122052eb8c48a7020e3c9a1f1ab78aa33f0460ddd4cf84ca030bd836e33919313918368505ed42dec25cdbb15bc81d2ab237638787601d499d73faa522e8ba97b378c7fee5ab9b812fa934bad6713ad2c8711d661331bdba59c0744482f00917b964c66c89d5784251b887781f2de1f8177d50873aacfb094208b5da9dbcae7178947831410f727fe5508bdeca88fbd9c73e480fb2d10d192d4ed51ff24bf8a297ec09ea2d8563efcdce694d40b782ea9cb929f75883423bc3c10e1a06f4746592dc1386099d0999d03566cf573b6046d550cd2f60a24e7c481c12a7d9197165150370fd7ba6d4a63057e4e4bc1de096401c3b808c3bb8b3e162fc5e04ac49b6e8fe2d731a3e33853ac17cda9851769c29290cba57abb1f6e646fedb46ecafad65a0facd72216e519db2cf93821fbfa164794323d4f2797901d102b03f1cd484acddb413a1a5d5df7b771d0521ba18df60a45b091991d4dca091ce89b74b459b2bf99571f63cbeb844d72642e1288f64891396f6c66dbff55b9cd33d640b6666634c7ccc1a00a757c16757f7f2ddc96bd8a122384888692fea5b3f99ebf8c6c17e4e7a0037926e50d43cab941dd554b1644266c6efbf0fd2954734718b65ec1e80b5ba9259641ac407be6ca08e92ec126b65e3bbe5241b70e6460342b7ab9519a2a1054d5fcb527b41c665a82e4bb3be133b12e3508c0e5be57376926677d4d2ac147eeb398e94c18ae15f87e1d8a15c7f044b420e6ab1b742c139ba43c1251cdcf9d6d768040eecc5a0b787372244f7d9add6f8c0760c51b649df0601f83f11c3085eb3ca1b170b0828ea0c94250233f63b3e914f4a1099802905796704b0f537409b7c77853c4f278ef01cb989d0a195fc166bee809605d026a7f09981df0ad15508cda5fdf6248d1884b5a29eb5781a4f2860a21c7957b4c0de77a0d5dc98c150bf4920d8e793ca52016ccbd84bab00582ecebebeb4cbfdf201513d507d2b86ef3c905e13a2069dd73f418f7f1eae2660c3dfc6744be91eae627096976ba08cb4d8912a868

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
6f7a85c2f99af519b9978f0cc09da6cc119f2e35a60638434b96f3021160a05f2bcccc6a9685230425fc0d46bcd6518bf2acbda47d130691d081e993067ee90d1452ee4ac84ce80825886d06c653557602cef861bf32a7e7b87dc37eb742ad78a1f2f331dedba2a07602fa48d880be9a8140f50acdad79e54e8d2ecbae430071a993a3241db41c13a0a68c4cefe64168d29c9dc3463184776a2d030e8fcbaa02a976639469cb0b9378456c87398db81e5b186606ebc62c83749db27230dd51fc50af0324d35a83067000fd16ad0654fd4c2c7df49febbe8f651cf6165a97de311e2b0b6e3a4e3140031ab5b5ccdde91c02a824804bdc943cb091c797ea810f87e6fdca693cb1ee8be493178c488ca5d113199700bb231a25a6ce779bf450a90e51d45deb5db97d77098896a3799d9aa9657d3a7b2943fc776e87cadb1c9c073480f6691ef5c338ce028fba6ae2a07c8ec2cdcba558feba3674e7dcc1e697655186d9d4a3989985ec37c0d69e2148af5944e231d47ed403a92d9a40a5719620bfd3bd8392ebb9d503a4402928fdcd68e2a6804b92e7093df8fe784c6f5996db5e2f4e69ba20c605e82743eee9ddd0930afad7fd8e71dbe068d928a14b9266d8ab02c769e045940d96806d30fa30331840aa714e5c8abd5ed7084ba33bea87f83e45d31ea92758e12006db1e3eab710e854fbfccdf5cd48d6db994814a31115e73fe64364d4ce22d667e6b7a9f5f8268bccf4c9b7a30106aa7fee9e03a8976f58977f089ca944bdd924926073e63a68dd3904cfd5ef0af3417b9638e96c6dfeaf0b310a9c9f082f52ea58406e0547f404a788425ac03744155f0bc512e03a9af20b5ecd75dc4f8a2cf595d4d6c7fb10ead485ccf23e9f54e123a7bebfc38897ff7001c55fd317c9b2a58e1820595932fbfa323b877c390227e90cbfcbf28ed4065008cf31ed8d17bf5b0900b8fb13b550de0c9865d3cdf18d76fc423a2f6ac528dfbe70d9a2208a9af4d84ee64b83b5d38b3d1b7286df947f848a9261ad70577176f03621a25f22b556f935688fe0ac4bcb2b7fc30c89ef8dcb6cef7b25ca8cdd2fa27a465dcd717afda4c5f9eddbfab698686bc3887f8cb7c5ea490503fabd54a8349cbe5d3a044559b0052c37d97c00c5a9c329c8a596be8da8716edf14796d6124c16f1b3911aa1530752d983f4194ab9c88bdbe764585d1cd0ae096ba2cfaf

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