\u00bfC\u00f3mo cambiar el icono \"Desplazarse al principio\" en Astra?<\/strong><\/h3>\n\n\n\nUtilizando un simple fragmento de c\u00f3digo, puedes cambiar f\u00e1cilmente el icono \"Desplazarse al principio\" en Astra.<\/p>\n\n\n\n
He aqu\u00ed c\u00f3mo a\u00f1adir un icono de flecha cl\u00e1sico de Font Awesome:<\/p>\n\n\n\n
function astra_scroll_top_icon_callback() {\n $classes = 'fa fa-arrow-up'; \/\/ Replace with your desired Font Awesome icon class\n return $classes;\n}\nadd_filter( 'astra_scroll_top_icon', 'astra_scroll_top_icon_callback', 10 );<\/code><\/pre>\n\n\n\nNota:<\/strong> Para utilizar la clase \"fa-angle-double-up\" es necesario poner en cola Fuente impresionante<\/a>\u00a0a su tema.<\/em><\/p>\n\n\n\nAntes de realizar cualquier personalizaci\u00f3n, es recomendable crear un archivo tema hijo para evitar que afecte al tema principal<\/a>. Si ya tienes un tema hijo, puedes saltarte este paso. Ahora, siga estos pasos para cambiar el logotipo en p\u00e1ginas espec\u00edficas:<\/p>\n\n\n\n\n- Inicie sesi\u00f3n en su sitio web WordPress.<\/li>\n\n\n\n
- Vaya a Apariencia > Editor de temas.<\/strong><\/li>\n\n\n\n
- Seleccione el tema hijo en el men\u00fa desplegable de la esquina superior derecha.<\/li>\n\n\n\n
- Abre el `funciones.php<\/strong>` e Inserte el siguiente fragmento de c\u00f3digo al final del archivo.<\/li>\n\n\n\n
- Despu\u00e9s de a\u00f1adir el c\u00f3digo, haga clic en \"Actualizar archivo<\/strong>\".<\/li>\n<\/ol>\n\n\n\n
![\"How](\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2024\/02\/scroll-to-top-code-1024x430.png\")
<\/a><\/figure>\n\n\n\nUna vez actualizado el c\u00f3digo, el icono de desplazamiento hacia arriba en el front end tendr\u00e1 este aspecto: <\/p>\n\n\n\n![\"How](\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2024\/02\/scroll-to-top-1024x449.png\")
<\/a><\/figure>\n\n\n\nConsulte el documento que explica c\u00f3mo a\u00f1adir c\u00f3digo PHP personalizado mediante la funci\u00f3n functions.php del tema hijo<\/a> archivo.\u00a0 <\/p>\n\n\n\nEsperamos que este documento le haya sido \u00fatil. No dude en dejarnos un comentario a continuaci\u00f3n si tiene alguna duda.<\/p>","protected":false},"excerpt":{"rendered":"
\u00bfQuieres personalizar el aspecto del icono de desplazamiento hacia arriba en tu tema Astra? El filtro astra_scroll_top_icon te permite hacerlo. Utilizando un simple fragmento de c\u00f3digo, puede cambiar f\u00e1cilmente el nombre de la clase del icono, lo que le permite: \u00bfC\u00f3mo cambiar el icono \"Scroll To Top\" en Astra? [...]<\/p>","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"docs_category":[2109],"docs_tag":[],"class_list":{"0":"post-738","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-astra-theme-pro-filters"},"spectra_custom_meta":{"_wp_old_slug":["astra_scroll_top_icon","how-to-update-the-scroll-to-top-icon"],"_wp_page_template":["default"],"wpil_sync_report3":["1"],"wpil_links_inbound_internal_count":["1"],"wpil_links_inbound_internal_count_data":["a:1:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:62:\"https:\/\/wpastra.com\/docs\/how-to-update-the-scroll-to-top-icon\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"24674\";s:5:\"title\";s:13:\"Scroll To Top\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:5099:\"\n
This is a premium feature available with Astra Pro Addon<\/strong> plugin. To use these Pro features, you need to have the Astra theme <\/a>along with the Astra Pro Addon installed on your website.<\/p>\n\n\n\nAs the name suggests, this addon helps add a scroll to top action on longer pages. This takes away the pain of scrolling right to the top when you\u2019ve reached the end of the page.<\/p>\n\n\n\n
Quick Steps on How to Add Scroll to Top Button Using the Scroll To Top Module<\/strong>
Step 1:<\/strong> Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?<\/a>
Step 2:<\/strong> Activate the Scroll To Top<\/strong> module from the Astra Options under the WordPress Dashboard > Appearance > Astra Options<\/em>
Step 3:<\/strong> Visit customizer [ Appearance > Astra Options >\u00a0Scroll To Top<\/em> ] to edit module settings<\/p>\n\n\n\nWhen enabled, a simple click on the icon will take you right to the top! It allows the visitor to easily scroll back to the top of the page. The button appears only when the user scrolls down. It is useful for one-page websites as well as long content-based websites.<\/p>\n\n\n\n
![\"\"](\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-scroll-to-top.png\")
<\/a><\/figure><\/div>\n\n\n\nAfter activating the module, you can find the settings under Appearance > Customize > Layout >Scroll To Top<\/strong>
In the settings, you will find the following options -<\/p>\n\n\n\n![\"\"](\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-scroll.png\")
<\/a><\/figure>\n\n\n\nDisplay On<\/strong><\/h3>\n\n\n\nYou can choose scroll to top link to be visible on desktop and\/or mobile.<\/p>\n\n\n\n
![\"\"](\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-devices.png\")
<\/a><\/figure><\/div>\n\n\n\nPosition<\/strong><\/h3>\n\n\n\nYou can choose scroll to top link to align on the right or the left side of the page.<\/p>\n\n\n\n
![\"\"](\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-sticky-position-1024x494.png\")
<\/figure><\/div>\n\n\n\nIcon Settings<\/strong><\/h3>\n\n\n\nYou can set the following icon properties.<\/p>\n\n\n\n
![\"\"](\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-colors.png\")
<\/a><\/figure><\/div>\n\n\n\n1. Icon Size<\/strong> - Allows you to set the size of the icon font.
2. Icon Background Radius<\/strong> - Apply rounded borders for the icon background with this.
3. Icon Color<\/strong> - Allows you to set the icon font color
4. Icon Background Color<\/strong> - Allows you to set the background color of the icon.
5. Icon Hover Color<\/strong> - Allows you to set icon font color on hover.
6. Icon Hover Background Color<\/strong> - Allows you to set the icon background color on hover.<\/p>\n\n\n\nApart from the above settings, you can change the icon for the scroll to top link. Please refer this document <\/a>- How to Update the \"Scroll To Top\" Icon<\/a><\/p>\n\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:43:\"https:\/\/wpastra.com\/docs\/scroll-to-top-pro\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=24674\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=24674\";}}s:6:\"anchor\";s:1:\" \";s:15:\"added_by_plugin\";b:0;}}"],"wpil_links_outbound_internal_count":["0"],"wpil_links_outbound_internal_count_data":["a:0:{}"],"wpil_links_outbound_external_count":["3"],"wpil_links_outbound_external_count_data":["a:3:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:22:\"http:\/\/fontawesome.io\/\";s:4:\"host\";s:14:\"fontawesome.io\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:12:\"Font Awesome\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:63:\"https:\/\/wpastra.com\/docs\/add-custom-php-code\/#3.-in-child-theme\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:27:\"child theme's functions.php\";s:15:\"added_by_plugin\";b:0;}i:2;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:57:\"https:\/\/wpastra.com\/docs\/add-font-awesome-icons-in-astra\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:56:\"How to Add Font Awesome Icons in Astra?<\/strong>\";s:15:\"added_by_plugin\";b:0;}}"],"wpil_sync_report2_time":["2019-10-18T07:07:26+00:00"],"_edit_lock":["1707990655:89"],"_edit_last":["89"],"onesignal_meta_box_present":["1"],"onesignal_send_notification":[""],"site-sidebar-layout":["default"],"site-content-layout":["default"],"theme-transparent-header-meta":["default"],"_yoast_wpseo_content_score":["90"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"_ppc_meta_key":["a:8:{s:20:\"ppc_key5d92f85d42273\";s:60:\"Images & Names Correctly. Title & Alt Tags are Given\";s:8:\"ppc_key2\";s:23:\"Featured Image Assigned\";s:8:\"ppc_key3\";s:17:\"Category Selected\";s:8:\"ppc_key5\";s:15:\"Title is Catchy\";s:8:\"ppc_key6\";s:22:\"Social Images Assigned\";s:8:\"ppc_key7\";s:8:\"Done SEO\";s:8:\"ppc_key8\";s:28:\"Spelling and Grammar Checked\";s:8:\"ppc_key4\";s:15:\"Formatting Done\";}"],"_yoast_wpseo_title":["How to Change the \"Scroll To Top\" Icon in Astra?"],"_ht_kb_post_views_count":["8"],"_ht_kb_usefulness":["0"],"_ht_article_order_103":["738"],"wp_last_modified_info":["September 19, 2022 @ 8:54 AM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"views":["1961"],"helpful":["1"],"unhelpful":["5"],"redirects":["0"],"_lmt_disableupdate":["no"],"_wplmi_last_modified":["2022-09-19 08:54:17"],"rank_math_title":["How to Change the \"Scroll To Top\" Icon in Astra?"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_analytic_object_id":["1438"],"rank_math_internal_links_processed":["1"],"rank_math_primary_docs_category":["2109"],"rank_math_seo_score":["20"],"_uag_custom_page_level_css":[""],"ast-site-content-layout":["default"],"adv-header-id-meta":[""],"stick-header-meta":[""],"astra-migrate-meta-layouts":["set"],"_trp_automatically_translated_slug_es_ES":["como-actualizar-el-icono-de-desplazamiento-hacia-arriba"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"09be29caa6ab528d295a2b4bcde0dee9\";s:6:\"images\";a:1:{i:0;i:174458;}}"],"pfd_related_docs":[""],"_uag_page_assets":["a:9:{s:3:\"css\";s:2495:\".wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 0px;column-gap: 0px;}.wp-block-uagb-container.uagb-block-debf2792{box-shadow: 0px 0px #00000070 ;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;overflow: visible;border-color: inherit;row-gap: 0px;column-gap: 0px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:8:{i:0;s:14:\"core\/paragraph\";i:1;s:9:\"core\/list\";i:2;s:14:\"core\/list-item\";i:3;s:12:\"core\/heading\";i:4;s:9:\"core\/code\";i:5;s:10:\"core\/image\";i:6;s:14:\"uagb\/container\";i:7;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1776786446\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"Swapnil","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/swapnild\/"},"uagb_comment_info":0,"uagb_excerpt":"Want to personalize the look and feel of the Scroll To Top icon in your Astra theme? The astra_scroll_top_icon filter gives you the power to do just that. By using a simple code snippet, you can easily change the icon’s class name, enabling you to: How to Change the “Scroll To Top” Icon in Astra?…","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/738"}],"collection":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=738"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/738\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=738"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=738"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
function astra_scroll_top_icon_callback() {\n $classes = 'fa fa-arrow-up'; \/\/ Replace with your desired Font Awesome icon class\n return $classes;\n}\nadd_filter( 'astra_scroll_top_icon', 'astra_scroll_top_icon_callback', 10 );<\/code><\/pre>\n\n\n\nNota:<\/strong> Para utilizar la clase \"fa-angle-double-up\" es necesario poner en cola Fuente impresionante<\/a>\u00a0a su tema.<\/em><\/p>\n\n\n\nAntes de realizar cualquier personalizaci\u00f3n, es recomendable crear un archivo tema hijo para evitar que afecte al tema principal<\/a>. Si ya tienes un tema hijo, puedes saltarte este paso. Ahora, siga estos pasos para cambiar el logotipo en p\u00e1ginas espec\u00edficas:<\/p>\n\n\n\n\n- Inicie sesi\u00f3n en su sitio web WordPress.<\/li>\n\n\n\n
- Vaya a Apariencia > Editor de temas.<\/strong><\/li>\n\n\n\n
- Seleccione el tema hijo en el men\u00fa desplegable de la esquina superior derecha.<\/li>\n\n\n\n
- Abre el `funciones.php<\/strong>` e Inserte el siguiente fragmento de c\u00f3digo al final del archivo.<\/li>\n\n\n\n
- Despu\u00e9s de a\u00f1adir el c\u00f3digo, haga clic en \"Actualizar archivo<\/strong>\".<\/li>\n<\/ol>\n\n\n\n
<\/a><\/figure>\n\n\n\nUna vez actualizado el c\u00f3digo, el icono de desplazamiento hacia arriba en el front end tendr\u00e1 este aspecto: <\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nConsulte el documento que explica c\u00f3mo a\u00f1adir c\u00f3digo PHP personalizado mediante la funci\u00f3n functions.php del tema hijo<\/a> archivo.\u00a0 <\/p>\n\n\n\nEsperamos que este documento le haya sido \u00fatil. No dude en dejarnos un comentario a continuaci\u00f3n si tiene alguna duda.<\/p>","protected":false},"excerpt":{"rendered":"
\u00bfQuieres personalizar el aspecto del icono de desplazamiento hacia arriba en tu tema Astra? El filtro astra_scroll_top_icon te permite hacerlo. Utilizando un simple fragmento de c\u00f3digo, puede cambiar f\u00e1cilmente el nombre de la clase del icono, lo que le permite: \u00bfC\u00f3mo cambiar el icono \"Scroll To Top\" en Astra? [...]<\/p>","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"docs_category":[2109],"docs_tag":[],"class_list":{"0":"post-738","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-astra-theme-pro-filters"},"spectra_custom_meta":{"_wp_old_slug":["astra_scroll_top_icon","how-to-update-the-scroll-to-top-icon"],"_wp_page_template":["default"],"wpil_sync_report3":["1"],"wpil_links_inbound_internal_count":["1"],"wpil_links_inbound_internal_count_data":["a:1:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:62:\"https:\/\/wpastra.com\/docs\/how-to-update-the-scroll-to-top-icon\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"24674\";s:5:\"title\";s:13:\"Scroll To Top\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:5099:\"\n
This is a premium feature available with Astra Pro Addon<\/strong> plugin. To use these Pro features, you need to have the Astra theme <\/a>along with the Astra Pro Addon installed on your website.<\/p>\n\n\n\nAs the name suggests, this addon helps add a scroll to top action on longer pages. This takes away the pain of scrolling right to the top when you\u2019ve reached the end of the page.<\/p>\n\n\n\n
Quick Steps on How to Add Scroll to Top Button Using the Scroll To Top Module<\/strong>
Step 1:<\/strong> Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?<\/a>
Step 2:<\/strong> Activate the Scroll To Top<\/strong> module from the Astra Options under the WordPress Dashboard > Appearance > Astra Options<\/em>
Step 3:<\/strong> Visit customizer [ Appearance > Astra Options >\u00a0Scroll To Top<\/em> ] to edit module settings<\/p>\n\n\n\nWhen enabled, a simple click on the icon will take you right to the top! It allows the visitor to easily scroll back to the top of the page. The button appears only when the user scrolls down. It is useful for one-page websites as well as long content-based websites.<\/p>\n\n\n\n
<\/a><\/figure><\/div>\n\n\n\nAfter activating the module, you can find the settings under Appearance > Customize > Layout >Scroll To Top<\/strong>
In the settings, you will find the following options -<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nDisplay On<\/strong><\/h3>\n\n\n\nYou can choose scroll to top link to be visible on desktop and\/or mobile.<\/p>\n\n\n\n
<\/a><\/figure><\/div>\n\n\n\nPosition<\/strong><\/h3>\n\n\n\nYou can choose scroll to top link to align on the right or the left side of the page.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nIcon Settings<\/strong><\/h3>\n\n\n\nYou can set the following icon properties.<\/p>\n\n\n\n
<\/a><\/figure><\/div>\n\n\n\n1. Icon Size<\/strong> - Allows you to set the size of the icon font.
2. Icon Background Radius<\/strong> - Apply rounded borders for the icon background with this.
3. Icon Color<\/strong> - Allows you to set the icon font color
4. Icon Background Color<\/strong> - Allows you to set the background color of the icon.
5. Icon Hover Color<\/strong> - Allows you to set icon font color on hover.
6. Icon Hover Background Color<\/strong> - Allows you to set the icon background color on hover.<\/p>\n\n\n\nApart from the above settings, you can change the icon for the scroll to top link. Please refer this document <\/a>- How to Update the \"Scroll To Top\" Icon<\/a><\/p>\n\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:43:\"https:\/\/wpastra.com\/docs\/scroll-to-top-pro\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=24674\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=24674\";}}s:6:\"anchor\";s:1:\" \";s:15:\"added_by_plugin\";b:0;}}"],"wpil_links_outbound_internal_count":["0"],"wpil_links_outbound_internal_count_data":["a:0:{}"],"wpil_links_outbound_external_count":["3"],"wpil_links_outbound_external_count_data":["a:3:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:22:\"http:\/\/fontawesome.io\/\";s:4:\"host\";s:14:\"fontawesome.io\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:12:\"Font Awesome\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:63:\"https:\/\/wpastra.com\/docs\/add-custom-php-code\/#3.-in-child-theme\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:27:\"child theme's functions.php\";s:15:\"added_by_plugin\";b:0;}i:2;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:57:\"https:\/\/wpastra.com\/docs\/add-font-awesome-icons-in-astra\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:56:\"How to Add Font Awesome Icons in Astra?<\/strong>\";s:15:\"added_by_plugin\";b:0;}}"],"wpil_sync_report2_time":["2019-10-18T07:07:26+00:00"],"_edit_lock":["1707990655:89"],"_edit_last":["89"],"onesignal_meta_box_present":["1"],"onesignal_send_notification":[""],"site-sidebar-layout":["default"],"site-content-layout":["default"],"theme-transparent-header-meta":["default"],"_yoast_wpseo_content_score":["90"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"_ppc_meta_key":["a:8:{s:20:\"ppc_key5d92f85d42273\";s:60:\"Images & Names Correctly. Title & Alt Tags are Given\";s:8:\"ppc_key2\";s:23:\"Featured Image Assigned\";s:8:\"ppc_key3\";s:17:\"Category Selected\";s:8:\"ppc_key5\";s:15:\"Title is Catchy\";s:8:\"ppc_key6\";s:22:\"Social Images Assigned\";s:8:\"ppc_key7\";s:8:\"Done SEO\";s:8:\"ppc_key8\";s:28:\"Spelling and Grammar Checked\";s:8:\"ppc_key4\";s:15:\"Formatting Done\";}"],"_yoast_wpseo_title":["How to Change the \"Scroll To Top\" Icon in Astra?"],"_ht_kb_post_views_count":["8"],"_ht_kb_usefulness":["0"],"_ht_article_order_103":["738"],"wp_last_modified_info":["September 19, 2022 @ 8:54 AM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"views":["1961"],"helpful":["1"],"unhelpful":["5"],"redirects":["0"],"_lmt_disableupdate":["no"],"_wplmi_last_modified":["2022-09-19 08:54:17"],"rank_math_title":["How to Change the \"Scroll To Top\" Icon in Astra?"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_analytic_object_id":["1438"],"rank_math_internal_links_processed":["1"],"rank_math_primary_docs_category":["2109"],"rank_math_seo_score":["20"],"_uag_custom_page_level_css":[""],"ast-site-content-layout":["default"],"adv-header-id-meta":[""],"stick-header-meta":[""],"astra-migrate-meta-layouts":["set"],"_trp_automatically_translated_slug_es_ES":["como-actualizar-el-icono-de-desplazamiento-hacia-arriba"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"09be29caa6ab528d295a2b4bcde0dee9\";s:6:\"images\";a:1:{i:0;i:174458;}}"],"pfd_related_docs":[""],"_uag_page_assets":["a:9:{s:3:\"css\";s:2495:\".wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 0px;column-gap: 0px;}.wp-block-uagb-container.uagb-block-debf2792{box-shadow: 0px 0px #00000070 ;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;overflow: visible;border-color: inherit;row-gap: 0px;column-gap: 0px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:8:{i:0;s:14:\"core\/paragraph\";i:1;s:9:\"core\/list\";i:2;s:14:\"core\/list-item\";i:3;s:12:\"core\/heading\";i:4;s:9:\"core\/code\";i:5;s:10:\"core\/image\";i:6;s:14:\"uagb\/container\";i:7;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1776786446\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"Swapnil","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/swapnild\/"},"uagb_comment_info":0,"uagb_excerpt":"Want to personalize the look and feel of the Scroll To Top icon in your Astra theme? The astra_scroll_top_icon filter gives you the power to do just that. By using a simple code snippet, you can easily change the icon’s class name, enabling you to: How to Change the “Scroll To Top” Icon in Astra?…","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/738"}],"collection":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=738"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/738\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=738"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=738"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}