{"id":23676,"date":"2022-02-26T06:00:00","date_gmt":"2022-02-26T01:00:00","guid":{"rendered":"https:\/\/mcstarters.com\/blog\/?p=23676"},"modified":"2024-03-15T16:40:41","modified_gmt":"2024-03-15T11:40:41","slug":"add-back-to-top-button-in-squarespace","status":"publish","type":"post","link":"https:\/\/mcstarters.com\/blog\/add-back-to-top-button-in-squarespace\/","title":{"rendered":"How to Add Back to Top Button in Squarespace"},"content":{"rendered":"\n<p>Do you want to add back to the top button in Squarespace? We will help you with that in just two steps. We make this with custom javascript and CSS code.<\/p>\n\n\n\n<p class=\"bg-light\">Download <a href=\"https:\/\/mcstarters.com\/free-elementor-header-templates\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/mcstarters.com\/free-elementor-header-templates\/\" rel=\"noreferrer noopener\">Free Header Templates For WordPress Elementor<\/a> Site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add Back to Top Button in Squarespace<\/h2>\n\n\n\n<p>Please follow the below step to add scroll back to the top button in Squarespace.<\/p>\n\n\n\n<p class=\"step\"><strong>Step 1: <\/strong>First copy below Javascript code.<\/p>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>&lt;script&gt;\n  const body = document.querySelector('body');\n  const cursor = document.createElement('button');\n  cursor.className = \"cursor\";\n  cursor.textContent = \"\u2b06\";\n\n   body.appendChild(cursor);\n   cursor.addEventListener(\"click\", function(){\n     window.scrollTo(0, 0);\n });\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p class=\"step\"><strong>Step 2:<\/strong> Go to Setting &gt; Advanced &gt; Code Injection &gt; Footer &gt; Scroll Down &gt; Paste Code in Footer<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"263\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2022\/02\/Squarespace-footer-injection-code.webp\" alt=\"\" class=\"wp-image-23756\" title=\"\"><\/figure>\n\n\n\n<p class=\"step\"><strong>Step 3:<\/strong> Now Copy Below CSS code <\/p>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>html{\n  scroll-behavior: smooth !important;\n}\n.cursor{\n    z-index: 10;\n    position: fixed;\n    bottom: 30px;\n    right: 20px;\n    border: none;\n    outline: none;\n    \n  \/* The Background color of the button. You can put your hex color instead of crimson*\/\n    background: blue;\n  \n  \/* The color of the icon inside the button. You can put your hex color instead #fff*\/\n    color: #fff;\n    padding: .8rem 1.3rem;\n    border-radius: 50%;\n  \n  \/* increase or decrease the icon font-size to make the button bigger or smaller *\/\n    font-size: 1.3rem;\n    font-weight: bold;\n}\n@media (max-width: 500px){\n    .cursor{\n        right: 10px;\n        bottom: 45px;\n    }\n}<\/code><\/pre>\n\n\n\n<p class=\"step\"><strong>Step 4:<\/strong> Go to Design &gt; Custom Css &gt; Paste Above Code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"305\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2022\/02\/Squarespace-custom-code-for-Back-to-Top-Button.webp\" alt=\"\" class=\"wp-image-23755\" title=\"\"><\/figure>\n\n\n\n<p>We hope you found Add Back to Top Button in Squarespace post helpful. But if you still face any problems, then comment below.<\/p>\n\n\n\n<p class=\"bg-blue\">Make Website With <a href=\"https:\/\/trk.elementor.com\/mcstartersblog\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/trk.elementor.com\/mcstartersblog\" rel=\"noreferrer noopener nofollow\">Drag and Drop Page Builder<\/a> in 5 Mint.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to add back to the top button&#8230;<\/p>\n","protected":false},"author":5,"featured_media":23757,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[71],"tags":[],"class_list":["post-23676","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-squarespace"],"_links":{"self":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/23676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/comments?post=23676"}],"version-history":[{"count":0,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/23676\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media\/23757"}],"wp:attachment":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media?parent=23676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/categories?post=23676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/tags?post=23676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}