{"id":30,"date":"2024-10-04T09:31:16","date_gmt":"2024-10-04T09:31:16","guid":{"rendered":"https:\/\/docs.codevibrant.com\/yaatra-blog\/?p=30"},"modified":"2024-10-07T09:24:16","modified_gmt":"2024-10-07T09:24:16","slug":"enhance-navigation-with-scroll-top-in-your-site","status":"publish","type":"post","link":"https:\/\/docs.codevibrant.com\/yaatra-blog\/enhance-navigation-with-scroll-top-in-your-site\/","title":{"rendered":"Enhance navigation with Scroll Top in your site"},"content":{"rendered":"\n

Imagine your website has extensive content. It would be inconvenient for visitors to scroll all the way back to the top. This is where the ‘Scroll Top’ feature comes in handy, improving the user experience by providing a quick way to return to the top of the page without manual scrolling.<\/p>\n\n\n\n

Scroll Top<\/strong> is an indispensable feature of a site which is displayed as an arrow<\/strong> button on the bottom right-hand side<\/strong> of your screen that will be visible after you have scrolled your site to some depth.<\/p>\n\n\n\n

Scroll Top<\/strong> button is enabled by default in Yaatra Blog<\/strong> theme, but you have a wish to disable<\/strong> or change its display button, <\/strong>follow the steps mentioned below:<\/p>\n\n\n\n

In order to enable\/disable\/change Scroll Top button you\u2019ll have to,<\/h2>\n\n\n\n
    \n
  • Navigate to General Settings >> Scroll Top<\/strong><\/li>\n\n\n\n
  • Then toggle Enable Scroll Top<\/strong> to either disable or enable it, if it already has been disabled.<\/li>\n\n\n\n
  • Click on the \u2018Publish\u2019 <\/strong>button to change the settings.<\/li>\n<\/ul>\n\n\n\n

    Pro Features<\/h2>\n\n\n\n

    Yaatra Pro features enhanced designing options for your “Scroll Top<\/strong>” button bolster your user engagements and experiences.<\/p>\n\n\n\n

      \n
    • 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
      \n
      \"\"<\/figure><\/div>\n\n\n
        \n
      • You can label the scroll top button by adding your label in the text field below the icons<\/li>\n\n\n\n
      • Adjust your sizes for your button by dragging sliders or manually adding the size.<\/li>\n<\/ul>\n\n\n
        \n
        \"\"<\/figure><\/div>\n\n\n
          \n
        • You can also choose to visualize your button to various devices. <\/li>\n<\/ul>\n\n\n
          \n

          In this case, the Scroll Top Button can be seen for Desktop and Tablet, but it won’t be seen in Mobile devices<\/p>\n<\/div>\n\n\n

            \n
          • After adjusting your button, you can further design it by going to Design tab<\/strong> beside the General tab<\/li>\n\n\n\n
          • Choose your colors for the Scroll Top<\/strong> button<\/li>\n\n\n\n
          • Select your Border Type<\/strong> from the drop-down menu<\/li>\n\n\n\n
          • Provide attributes for padding<\/strong> and radius <\/strong>of your button <\/li>\n<\/ul>\n\n\n
            \n
            \"\"<\/figure><\/div>","protected":false},"excerpt":{"rendered":"

            Imagine your website has extensive content. It would be inconvenient for visitors to scroll all the way back to the top. This is where the ‘Scroll Top’ feature comes in handy, improving the user experience by providing a quick way to return to the top of the page without manual scrolling. Scroll Top is an indispensable […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-30","post","type-post","status-publish","format-standard","hentry","category-general-settings"],"_links":{"self":[{"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/posts\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":3,"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/posts\/30\/revisions"}],"predecessor-version":[{"id":112,"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/posts\/30\/revisions\/112"}],"wp:attachment":[{"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/media?parent=30"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/categories?post=30"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/tags?post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}