{"id":2267,"date":"2021-05-20T17:57:37","date_gmt":"2021-05-20T14:57:37","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=2267"},"modified":"2024-01-09T17:04:44","modified_gmt":"2024-01-09T15:04:44","slug":"scroll-to-top","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/general-options\/scroll-to-top\/","title":{"rendered":"Scroll to Top"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Quick Look<\/h3>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/05\/Screen-Recording-2021-09-14-at-00.06.05.mov\"><\/video><figcaption class=\"wp-element-caption\">Scroll to Top Button Configuration &amp; Looks<\/figcaption><\/figure>\n\n\n\n<p>Scroll to Top displays a convenient button for your visitors to quickly get back to the top of the page. A smooth scrolling animation also makes this feature a please to use.<\/p>\n\n\n\n<p>It can be activated from inside the <strong>Customiser -&gt; General -&gt; Scroll to Top<\/strong> section. Diving in deeper reveals customisation settings such as changing the <em>icon<\/em>, its <em>size<\/em>, its <em>shape<\/em>, <em>margins<\/em> from the side of the screen and more!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Granular Controls<\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e9244fd3ce8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e9244fd3ce8\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/05\/scroll-to-top-granular-controls-scaled.jpg\" alt=\"\" class=\"wp-image-5397\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Scroll to top options<\/figcaption><\/figure>\n\n\n\n<p>As you can see, we offer <strong>6 different designs<\/strong> for the icon, as well as the ability to upload your very own custom design if you&#8217;re a Blocksy Pro user.<\/p>\n\n\n\n<p>There&#8217;s also an option to switch between the <strong>scroll to top button shapes<\/strong> &#8212; a <strong>squared off icon<\/strong>, or encapsulated in a <strong>circle<\/strong>. Size and spacing controls are present here, letting you customise the <strong>distance<\/strong> that the scroll to top button has from the viewport margins.<\/p>\n\n\n\n<p>Last, but not least, there&#8217;s a control that lets you specify <strong>on which devices<\/strong> the scroll to top button will show up. You can enable it for the desktop, tablet and mobile views independently.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quick Look Scroll to Top displays a convenient button for your visitors to quickly get back to the top of the page. A smooth scrolling animation also makes this feature a please to use. It can be activated from inside the Customiser -&gt; General -&gt; Scroll to Top section. Diving in deeper reveals customisation settings [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[113],"class_list":["post-2267","documentation","type-documentation","status-publish","hentry","doc_categories-general-options"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=2267"}],"version-history":[{"count":1,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2267\/revisions"}],"predecessor-version":[{"id":9125,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2267\/revisions\/9125"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=2267"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=2267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}