{"id":86,"date":"2024-12-17T10:24:55","date_gmt":"2024-12-17T10:24:55","guid":{"rendered":"https:\/\/docs.codevibrant.com\/yaatra\/?p=86"},"modified":"2024-12-17T10:24:55","modified_gmt":"2024-12-17T10:24:55","slug":"add-scroll-top-on-your-site-with-yaatra-pro","status":"publish","type":"post","link":"https:\/\/docs.codevibrant.com\/yaatra\/add-scroll-top-on-your-site-with-yaatra-pro\/","title":{"rendered":"Add Scroll Top on your site with Yaatra Pro"},"content":{"rendered":"<div class=\"mt-docs-green-note\">\n<p>This feature is in the pro version of Yaatra. Please make sure to purchase the Yaatra Pro to enable this feature on your website<\/p>\n<\/div>\n\n\n<p>If your website is packed with content, it&#8217;s a hassle for visitors to scroll back to the top. That&#8217;s why a &#8216;Scroll Top&#8217; button is so useful. It enhances the user experience by offering an instant shortcut to the top of the page, eliminating the need for manual scrolling.<\/p>\n\n\n\n<p><strong>Scroll Top<\/strong>&nbsp;is an indispensable feature of a site which is displayed as an&nbsp;<strong>arrow<\/strong>&nbsp;button on the&nbsp;<strong>bottom right-hand side<\/strong>&nbsp;of your screen that will be visible after you have scrolled your site to some depth.<\/p>\n\n\n\n<p><strong>Scroll Top<\/strong>&nbsp;button is enabled by default in&nbsp;<strong>Yaatra Blog<\/strong>&nbsp;theme, but you have a wish to&nbsp;<strong>disable<\/strong>&nbsp;or&nbsp;<strong>change its display button,&nbsp;<\/strong>follow the steps mentioned below:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">In order to enable\/disable\/change Scroll Top button you\u2019ll have to,<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to&nbsp;<strong>General Settings &gt;&gt; Scroll Top<\/strong><\/li>\n\n\n\n<li>Then toggle&nbsp;<strong>Enable Scroll Top<\/strong>&nbsp;to either disable or enable it, if it already has been disabled.<\/li>\n\n\n\n<li>Click on the \u2018<strong>Publish\u2019&nbsp;<\/strong>button to change the settings.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Pro Features<\/h2>\n\n\n\n<p>Yaatra Pro features enhanced designing options for your \u201c<strong>Scroll Top<\/strong>\u201d button bolster your user engagements and experiences.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For starters, you can choose various types of styles for your scroll top button. Yaatra Pro offers 15 different types of stylish buttons to display.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-17.png\" alt=\"\" class=\"wp-image-109\"\/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>You can label the scroll top button by adding your label in the text field below the icons<\/li>\n\n\n\n<li>Adjust your sizes for your button by dragging sliders or manually adding the size.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-18.png\" alt=\"\" class=\"wp-image-110\"\/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>You can also choose to visualize your button to various devices.<\/li>\n<\/ul>\n\n\n<div class=\"mt-docs-green-note\">\n<p>In this case, the Scroll Top Button can be seen for Desktop and Tablet, but it won\u2019t be seen in Mobile devices<\/p>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After adjusting your button, you can further design it by going to&nbsp;<strong>Design tab<\/strong>&nbsp;beside the General tab<\/li>\n\n\n\n<li>Choose your colors for the&nbsp;<strong>Scroll Top<\/strong>&nbsp;button<\/li>\n\n\n\n<li>Select your&nbsp;<strong>Border Type<\/strong>&nbsp;from the drop-down menu<\/li>\n\n\n\n<li>Provide attributes for&nbsp;<strong>padding<\/strong>&nbsp;and&nbsp;<strong>radius&nbsp;<\/strong>of your button<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-19.png\" alt=\"\" class=\"wp-image-111\"\/><\/figure><\/div>","protected":false},"excerpt":{"rendered":"<p>This feature is in the pro version of Yaatra. Please make sure to purchase the Yaatra Pro to enable this feature on your website If your website is packed with content, it&#8217;s a hassle for visitors to scroll back to the top. That&#8217;s why a &#8216;Scroll Top&#8217; button is so useful. It enhances the user [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-86","post","type-post","status-publish","format-standard","hentry","category-general-settings"],"_links":{"self":[{"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/posts\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":1,"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/posts\/86\/revisions\/87"}],"wp:attachment":[{"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}