{"id":1407,"date":"2026-10-11T03:58:11","date_gmt":"2026-10-11T03:58:11","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?page_id=1407"},"modified":"2026-10-11T04:54:52","modified_gmt":"2026-10-11T04:54:52","slug":"scroll-to-top","status":"publish","type":"page","link":"https:\/\/shapekode.com\/product\/shapeblock\/scroll-to-top\/","title":{"rendered":"Scroll to Top"},"content":{"rendered":"<style id=\"shapeblock-block-css-5-inline-css\">\n.shapeblock-layout-row-mum3s8 { justify-content:center;align-content:stretch;flex-wrap:wrap;gap:20px;padding-top:120px;padding-right:16px;padding-bottom:120px;padding-left:16px;background-color:#5933ff;background-image:url(https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/banner-shape.webp);background-size:cover;background-position:center center;background-repeat:no-repeat;background-attachment:scroll;--bp-cols:1;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-mum3s8 { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-mum3s8 { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-mum3s8 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-elv1eg { flex:0 1 calc(700px - (var(--bp-cols, 1) - 1) * var(--bp-gap, 0px) * 700 \/ 100) !important;max-width:calc(700px - (var(--bp-cols, 1) - 1) * var(--bp-gap, 0px) * 700 \/ 100) !important; }\n.shapeblock-col-elv1eg > .shapeblock-column__inner { display:flex;flex-direction:column;align-items:center; }.shapeblock-heading-block-wrap.shapeblock-heading-130a5c .shapeblock-heading { text-align:center; }\n.shapeblock-heading-block-wrap.shapeblock-heading-130a5c .shapeblock-heading .shapeblock-title { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-1-inline-css *\/\n\n\n.shapeblock-button-block-wrap.shapeblock-button-5240d5 .shapeblock-button { font-weight:500;text-decoration:none;justify-content:center;min-width:min(150px, 100%);color:#ffffff;border-style:solid;border-color:#00000000;border-width:1px 1px 1px 1px; }\n.shapeblock-button-block-wrap.shapeblock-button-5240d5 .shapeblock-button .shapeblock-button-icon-before { margin-right:8px; }\n.shapeblock-button-block-wrap.shapeblock-button-5240d5 .shapeblock-button .shapeblock-button-icon-after { margin-left:8px;margin-right:0; }\n\/*# sourceURL=shapeblock-block-css-2-inline-css *\/\n\n\n.shapeblock-button-block-wrap.shapeblock-button-31oq4y .shapeblock-button { font-weight:500;text-decoration:none;justify-content:center;min-width:min(150px, 100%);color:#ffffff;border-style:solid;border-color:#ffffff;border-width:1px 1px 1px 1px; }\n.shapeblock-button-block-wrap.shapeblock-button-31oq4y .shapeblock-button:hover { color:#ffffff;border-style:solid;border-color:#0067ff;border-width:1px 1px 1px 1px; }\n.shapeblock-button-block-wrap.shapeblock-button-31oq4y .shapeblock-button .shapeblock-button-icon-before { margin-right:8px; }\n.shapeblock-button-block-wrap.shapeblock-button-31oq4y .shapeblock-button .shapeblock-button-icon-after { margin-left:8px;margin-right:0; }\n\/*# sourceURL=shapeblock-block-css-3-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-4-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-5-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-mum3s8 is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-elv1eg wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h1 style=\"margin-bottom:8px\" class=\"has-link-color wp-elements-1 wp-block-post-title has-text-color has-base-color has-xx-large-font-size has-text-align-center\">Scroll to Top<\/h1> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-130a5c wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h4 class=\"shapeblock-title\">Build your Scroll to Top With ShapeBlock<\/h4>\t<\/div> <\/div> <p class=\"has-text-align-center has-base-color has-text-color has-link-color wp-elements-2 wp-block-paragraph\" style=\"margin-top:20px\">Scroll to Top feature adds a button that appears when users scroll down the page, allowing them to quickly return to the top of the website with a single click for better navigation and user experience.<\/p> <div class=\"wp-block-group is-content-justification-center is-layout-flex wp-container-core-group-is-layout-211891db wp-block-group-is-layout-flex\" style=\"padding-top:14px\"> <div class=\"shapeblock-block shapeblock-button-block-wrap shapeblock-button-5240d5 wp-block-shapeblock-button\"> <a href=\"#\" class=\"shapeblock-button shapeblock-button-primary\" target=\"_self\"> <span class=\"shapeblock-button-text\">Get Started Now<\/span> <\/a> <\/div> <div class=\"shapeblock-block shapeblock-button-block-wrap shapeblock-button-31oq4y wp-block-shapeblock-button\"> <a href=\"#\" class=\"shapeblock-button shapeblock-button-outline\" target=\"_blank\" rel=\"noopener\"> <span class=\"shapeblock-button-text\">Documentation  <\/span> <\/a> <\/div> <\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-14-inline-css\">\n.shapeblock-layout-row-kphs50 { flex-direction:column;justify-content:center;align-items:center;flex-wrap:wrap;gap:26px;padding-top:100px;padding-bottom:100px;--bp-cols:2;--bp-gap:26px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-kphs50 { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-kphs50 { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-kphs50 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-kphs50 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}@media (max-width: 1024px){.shapeblock-layout-row.shapeblock-layout-row-kphs50 > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-column:nth-child(1){flex:0 0 auto !important;max-width:100% !important;width:100%;}.shapeblock-layout-row.shapeblock-layout-row-kphs50 > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-column:nth-child(2){flex:0 0 auto !important;max-width:100% !important;width:100%;}}@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-kphs50 > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-column:nth-child(1){flex:0 0 auto !important;max-width:100% !important;width:100%;}.shapeblock-layout-row.shapeblock-layout-row-kphs50 > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-column:nth-child(2){flex:0 0 auto !important;max-width:100% !important;width:100%;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-t7qo0r { width:600px !important;flex:0 0 auto !important; }.shapeblock-heading-block-wrap.shapeblock-heading-m7k13i .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-6-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-7-inline-css *\/\n\n\n.shapeblock-col-dhw6c3 { padding-top:30px;padding-right:16px;padding-bottom:30px;padding-left:16px;background-color:#e8e8f8;border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-right-radius:12px;border-bottom-left-radius:12px; }\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-dhw6c3 { width:700px !important;flex:0 0 auto !important; }\n.shapeblock-col-dhw6c3 > .shapeblock-column__inner { display:flex;flex-direction:row;justify-content:space-around;align-items:center;gap:20px; }.shapeblock-scroll-top-block-wrap.shapeblock-stt-657531 .shapeblock-scroll-top { background-color:#5933ff;color:#ffffff; }\n.shapeblock-scroll-top-block-wrap.shapeblock-stt-657531 .shapeblock-scroll-top svg, .shapeblock-scroll-top-block-wrap.shapeblock-stt-657531 .shapeblock-scroll-top svg path { fill:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-8-inline-css *\/\n\n\n.shapeblock-scroll-top-block-wrap.shapeblock-stt-ppm3it .shapeblock-scroll-top { background-color:#5933ff;color:#ffffff;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-right-radius:8px;border-bottom-left-radius:8px; }\n.shapeblock-scroll-top-block-wrap.shapeblock-stt-ppm3it .shapeblock-scroll-top:hover { background-color:#120d29; }\n.shapeblock-scroll-top-block-wrap.shapeblock-stt-ppm3it .shapeblock-scroll-top svg, .shapeblock-scroll-top-block-wrap.shapeblock-stt-ppm3it .shapeblock-scroll-top svg path { fill:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-9-inline-css *\/\n\n\n.shapeblock-scroll-top-block-wrap.shapeblock-stt-y1qufi .shapeblock-scroll-top { background-color:#ffffff00;color:#5933ff;border-style:solid;border-color:#5933ff;border-width:1px 1px 1px 1px; }\n.shapeblock-scroll-top-block-wrap.shapeblock-stt-y1qufi .shapeblock-scroll-top svg, .shapeblock-scroll-top-block-wrap.shapeblock-stt-y1qufi .shapeblock-scroll-top svg path { fill:#5933ff; }\n\/*# sourceURL=shapeblock-block-css-10-inline-css *\/\n\n\n.shapeblock-scroll-top-block-wrap.shapeblock-stt-0k8mjb .shapeblock-scroll-top { background-color:#5833ff00;color:#5933ff;border-style:solid;border-color:#5933ff;border-width:1px 1px 1px 1px; }\n.shapeblock-scroll-top-block-wrap.shapeblock-stt-0k8mjb .shapeblock-scroll-top:hover { background-color:#5933ff;color:#ffffff; }\n.shapeblock-scroll-top-block-wrap.shapeblock-stt-0k8mjb .shapeblock-scroll-top svg, .shapeblock-scroll-top-block-wrap.shapeblock-stt-0k8mjb .shapeblock-scroll-top svg path { fill:#5933ff; }\n.shapeblock-scroll-top-block-wrap.shapeblock-stt-0k8mjb .shapeblock-scroll-top:hover svg, .shapeblock-scroll-top-block-wrap.shapeblock-stt-0k8mjb .shapeblock-scroll-top:hover svg path { fill:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-11-inline-css *\/\n\n\n.shapeblock-scroll-top-block-wrap.shapeblock-stt-v8giqe .shapeblock-scroll-top { background-color:#5933ff;color:#ffffff;box-shadow:0 4px 10px 0 #251e1e78; }\n.shapeblock-scroll-top-block-wrap.shapeblock-stt-v8giqe .shapeblock-scroll-top svg, .shapeblock-scroll-top-block-wrap.shapeblock-stt-v8giqe .shapeblock-scroll-top svg path { fill:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-12-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-13-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-14-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-kphs50 is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-t7qo0r wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-m7k13i wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">Scroll To Top<\/h2>\t<\/div> <\/div> <p class=\"has-text-align-center wp-block-paragraph\" style=\"margin-top:10px;margin-bottom:10px\">Scroll to Top settings allow you to control the visibility, position, and behavior of the back-to-top button for smoother page navigation and improved user experience.<\/p> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-dhw6c3 sk-demo-scroll-top wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-scroll-top-block-wrap shapeblock-stt-657531 wp-custom-css-30c008c9 wp-block-shapeblock-scroll-to-top\"> <div class=\"shapeblock-scroll-top shapeblock-scroll-visible shapeblock-scroll-editor\" role=\"button\" tabindex=\"0\" aria-label=\"Scroll to top\" data-show-after=\"150\"> <i class=\"shapeblock-icon shapeblock-icon-arrow-up\" aria-hidden=\"true\"><\/i> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-scroll-top-block-wrap shapeblock-stt-ppm3it wp-block-shapeblock-scroll-to-top\"> <div class=\"shapeblock-scroll-top shapeblock-scroll-visible shapeblock-scroll-editor\" role=\"button\" tabindex=\"0\" aria-label=\"Scroll to top\" data-show-after=\"150\"> <i class=\"shapeblock-icon shapeblock-icon-arrow-up\" aria-hidden=\"true\"><\/i> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-scroll-top-block-wrap shapeblock-stt-y1qufi wp-block-shapeblock-scroll-to-top\"> <div class=\"shapeblock-scroll-top shapeblock-scroll-visible shapeblock-scroll-editor\" role=\"button\" tabindex=\"0\" aria-label=\"Scroll to top\" data-show-after=\"150\"> <i class=\"shapeblock-icon shapeblock-bi-chevron-up\" aria-hidden=\"true\"><\/i> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-scroll-top-block-wrap shapeblock-stt-0k8mjb wp-block-shapeblock-scroll-to-top\"> <div class=\"shapeblock-scroll-top shapeblock-scroll-visible shapeblock-scroll-editor\" role=\"button\" tabindex=\"0\" aria-label=\"Scroll to top\" data-show-after=\"150\"> <i class=\"shapeblock-icon shapeblock-bi-chevron-up\" aria-hidden=\"true\"><\/i> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-scroll-top-block-wrap shapeblock-stt-v8giqe wp-block-shapeblock-scroll-to-top\"> <div class=\"shapeblock-scroll-top shapeblock-scroll-visible shapeblock-scroll-editor\" role=\"button\" tabindex=\"0\" aria-label=\"Scroll to top\" data-show-after=\"150\"> <i class=\"shapeblock-icon shapeblock-icon-caret-up\" aria-hidden=\"true\"><\/i> <\/div> <\/div> <\/div><\/div> <\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-full-width","meta":{"_blockode_hide_title":false,"footnotes":""},"class_list":["post-1407","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages\/1407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=1407"}],"version-history":[{"count":11,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages\/1407\/revisions"}],"predecessor-version":[{"id":1438,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages\/1407\/revisions\/1438"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=1407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}