{"id":106410,"date":"2023-04-28T16:16:18","date_gmt":"2023-04-28T10:46:18","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=106410"},"modified":"2023-04-28T16:16:18","modified_gmt":"2023-04-28T10:46:18","slug":"scroll-top-animation-in-elementor-accordion","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/scroll-top-animation-in-elementor-accordion\/","title":{"rendered":"How to Add Scroll Top Animation in Elementor Accordion?"},"content":{"rendered":"\n<p>Adding scroll top animation to the Elementor accordion, users can click on an accordion item and have it smoothly scroll to the top of the page, ensuring that the content is in full view. This feature is particularly useful for longer accordion items or when there are multiple accordion items on a page.&nbsp;<\/p>\n\n\n\n<p>You can easily add scroll top animation to your Elementor accordion using The Plus Addons for Elementor&#8217;s Accordion widget.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Accordion widget, <a href=\"\/docs\/elementor-accordion-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure its installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/accordion?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>To do this add the widget on the page, then go to the <strong>Special Options<\/strong> tab and turn on the <strong>Scroll Top<\/strong> toggle.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"297\" height=\"1004\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/04\/accordion-scroll-top.png\" alt=\"accordion scroll top\" class=\"wp-image-106414\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/accordion-scroll-top.png 297w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/accordion-scroll-top-89x300.png 89w\" sizes=\"(max-width: 297px) 100vw, 297px\" \/><\/figure>\n\n\n\n<p>Then, in the <strong>Offset<\/strong> field, you can specify the amount of space from the top of the page until the active accordion item scrolls.&nbsp;<\/p>\n\n\n\n<p>In the <strong>Speed<\/strong> field, you can set scroll animation speed.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"908\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/04\/accordion-scroll-top-demo.gif\" alt=\"accordion scroll top demo\" class=\"wp-image-106415\"\/><\/figure>\n","protected":false},"author":16,"featured_media":106416,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[529,527],"class_list":["post-106410","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-accordion","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/106410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=106410"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/106410\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/106416"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=106410"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=106410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}