If your page content is lengthy, it’s good practice to add a ‘back to top button’ on your page. Many themes have the ability to add a ‘back to top button’, but if your theme does not have this ability or you want to use a customized button, this article is for you.
In this article, you will learn how to add a ‘back to top button’ to your WordPress site without a plugin.
Add back to top button in WordPress without plugins
Step 1.Add The Following Code to the functions.php File
Inside the WordPress dashboard Theme Editor or on the web server, find and open the functions.php file. Go to Appearance -> Theme Editor.
You must create a child theme before making any changes to functions.php file. Otherwise, the applied changes will be lost after each update.
Create child theme in WordPress step by step [without plugin]
As an alternative method, you can use the Code Snippets plugin to insert your codes into WordPress.
Copy the PHP code from the below box and paste it at the end of the functions.php file.
add_action( 'wp_footer', function () { if ( !is_admin() ) {
$location = 'right'; // left or right
$scale = '1';
$icon = '
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50.002" viewBox="0 0 13.229 13.23"><path d="M6.008 13.202a6.728 6.728 0 0 1-2.84-.947A6.93 6.93 0 0 1 .961 10.04C-.371 7.82-.315 5.104 1.109 2.963A6.602 6.602 0 0 1 9.572.7a6.834 6.834 0 0 1 2.685 2.466c1.292 2.108 1.297 4.735.012 6.873a6.93 6.93 0 0 1-2.206 2.216 6.674 6.674 0 0 1-4.055.947zM3.12 8.9c.067-.027.616-.559 1.796-1.738l1.7-1.697 1.699 1.697c1.18 1.18 1.729 1.71 1.795 1.738a.475.475 0 0 0 .556-.124c.157-.178.168-.388.032-.592-.04-.06-.909-.944-1.93-1.963-1.292-1.29-1.885-1.866-1.952-1.894a.549.549 0 0 0-.402 0c-.11.046-3.756 3.67-3.884 3.86-.094.142-.118.263-.079.394a.6.6 0 0 0 .274.323.57.57 0 0 0 .395-.004z"/></svg>
';
?>
<a href="#" class="back-to-top"> <div > <?= $icon ?> </div> </a>
<style>
.back-to-top svg {
transform: scale(<?= $scale ?>);
}
.back-to-top {
width: 50px;
position: fixed;
bottom: 0px;
<?= $location ?>: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
text-decoration: none;
opacity: 0;
pointer-events: none;
transition: all 0.4s;
z-index: 20;
}
.back-to-top.active-to-top {
bottom: 16px;
pointer-events: auto;
opacity: 1;
}
html {
scroll-behavior: smooth;
}
.back-to-top div:hover {
animation: btt 1s linear infinite alternate;
}
@keyframes btt {
0% {transform: scale(1);}
50% {transform: scale(1.1);}
100% {transform: scale(1);}
}
</style>
<script>
const toTop = document.querySelector('.back-to-top');
window.addEventListener("scroll", () => {if(window.pageYOffset > 100) {toTop.classList.add('active-to-top')} else {toTop.classList.remove('active-to-top')} } );
</script>
<?php }},100);Step 2.Customize the scroll to top code
The above code will work by default, but you can customize it.
Here you can move the ‘back to top button’ to the right or left of the page.
$location = 'right'; // left or rightHere you can make the size of the button smaller or larger.
$scale = '1'; Here you can change the icon of the button. I will put two more icons below for you to use.
$icon = '
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50.002" viewBox="0 0 13.229 13.23"><path d="M6.008 13.202a6.728 6.728 0 0 1-2.84-.947A6.93 6.93 0 0 1 .961 10.04C-.371 7.82-.315 5.104 1.109 2.963A6.602 6.602 0 0 1 9.572.7a6.834 6.834 0 0 1 2.685 2.466c1.292 2.108 1.297 4.735.012 6.873a6.93 6.93 0 0 1-2.206 2.216 6.674 6.674 0 0 1-4.055.947zM3.12 8.9c.067-.027.616-.559 1.796-1.738l1.7-1.697 1.699 1.697c1.18 1.18 1.729 1.71 1.795 1.738a.475.475 0 0 0 .556-.124c.157-.178.168-.388.032-.592-.04-.06-.909-.944-1.93-1.963-1.292-1.29-1.885-1.866-1.952-1.894a.549.549 0 0 0-.402 0c-.11.046-3.756 3.67-3.884 3.86-.094.142-.118.263-.079.394a.6.6 0 0 0 .274.323.57.57 0 0 0 .395-.004z"/></svg>
';If you need more icons, a package of 200 hand-picked icons is placed below that you can buy and use.
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 13.229 13.229" version="1.1" id="svg8"><defs id="defs2"><style id="style268"/><path id="b" d="M49.52 41c-.34-.19-.67-.38-1-.54-8.35-4.15-18.48-.75-22.63 7.6-4.15 8.35-.75 18.48 7.6 22.63 8.35 4.15 18.48.75 22.63-7.6 3.95-7.95 1.07-17.61-6.6-22.09z"/><path id="d" d="M94.16 41c-.34-.19-.68-.38-1-.54-8.32-4.14-18.41-.74-22.55 7.57-4.14 8.32-.74 18.41 7.57 22.55 8.32 4.14 18.41.74 22.55-7.57 3.94-7.92 1.07-17.54-6.57-22.01z"/><style id="style268-2"/><style id="style268-1"/><style id="style958"/><style id="style268-6"/><style id="style958-8"/><style id="style268-9"/><style id="style958-7"/><style id="style1087"></style><style id="style1185"></style><path id="a" d="M61.67 53.88c-8.51.05-17.01-.67-25.39-2.14a2.597 2.597 0 0 0-3 3C35.7 66.58 47.35 76.3 61.7 76.3c15.69 0 26.26-10 28.45-21.6a2.587 2.587 0 0 0-3-3c-8.41 1.49-16.94 2.22-25.48 2.18z"/><style id="style268-5"/><style id="style958-9"/><style id="style268-50"/><style id="style958-3"/><style id="style1920"></style><path id="f" d="M58.71 70.32c-6.6 0-7.69 7.56-6.11 11.88 1.58 4.32 6.27 7.33 10.45 6.91 14.99-1.51 18.75.94 20.71 5.4 2.69 6.16 5.92 6.47 9.2 6.07 4.8-.58 4.52-9.89 4.73-18.93.23-10.22-16.5-13.7-16.5-13.7s-19.32 2.37-22.48 2.37z"/><style id="style268-8"/><style id="style958-2"/><style id="style268-3"/><style id="style958-76"/><style id="style2339"></style><style id="style268-60"/><style id="style958-1"/><style id="style268-7"/><style id="style958-92"/><style id="style268-24"/><style id="style958-4"/><style id="style2710"></style><style id="style268-35"/><style id="style958-15"/><style id="style268-59"/><style id="style958-6"/><style id="style3221"></style><style id="style268-88"/><style id="style958-0"/><style id="style268-0"/><style id="style958-39"/><style id="style3563"></style><style id="style268-4"/><style id="style958-74"/><style id="style268-08"/><style id="style958-749"/><style id="style4317"></style><style id="style268-94"/><style id="style958-42"/><style id="style5031"></style></defs><g id="layer1" transform="translate(677.298 622.536)"><path d="M-670.684-618.028l3.388 3.388-.55.55-2.838-2.837-2.837 2.837-.55-.55zm6.615 2.107a6.622 6.622 0 0 1-6.615 6.614 6.622 6.622 0 0 1-6.614-6.614 6.622 6.622 0 0 1 6.614-6.615 6.622 6.622 0 0 1 6.615 6.615zm-.778 0a5.843 5.843 0 0 0-5.837-5.837 5.843 5.843 0 0 0-5.836 5.837 5.843 5.843 0 0 0 5.836 5.836 5.842 5.842 0 0 0 5.837-5.836z" id="path5343" stroke-width=".778"/></g><style id="style189"></style><style type="text/css" id="style83"/><style type="text/css" id="style118"/><style type="text/css" id="style147"/><style type="text/css" id="style249"/><style type="text/css" id="style988"/><style type="text/css" id="style1092"/><style type="text/css" id="style83-1"/><style type="text/css" id="style118-3"/><style type="text/css" id="style147-7"/><style type="text/css" id="style249-3"/><style type="text/css" id="style988-9"/><style type="text/css" id="style1092-3"/><style type="text/css" id="style83-4"/><style type="text/css" id="style118-2"/><style type="text/css" id="style147-0"/><style type="text/css" id="style249-4"/><style type="text/css" id="style988-6"/><style type="text/css" id="style1092-4"/><style id="style1442"></style><style id="style1460"></style><style id="style1484"/><style type="text/css" id="style83-6"></style><style type="text/css" id="style118-20"></style><style type="text/css" id="style147-03"></style><style type="text/css" id="style249-9"/><style type="text/css" id="style988-8"/><style type="text/css" id="style1092-7"></style><style type="text/css" id="style1405"></style><style id="style1588"></style><style id="style1619"></style><style id="style1647"></style><style id="style1672"></style><style type="text/css" id="style83-5"/><style type="text/css" id="style118-5"/><style type="text/css" id="style147-9"/><style type="text/css" id="style249-6"/><style type="text/css" id="style988-4"/><style type="text/css" id="style1092-9"/><style type="text/css" id="style1405-1"/><style type="text/css" id="style83-8"/><style type="text/css" id="style118-4"/><style type="text/css" id="style147-91"/><style type="text/css" id="style249-1"/><style type="text/css" id="style988-92"/><style type="text/css" id="style1092-5"/><style type="text/css" id="style1405-5"/><style type="text/css" id="style83-2"/><style type="text/css" id="style118-6"/><style type="text/css" id="style147-4"/><style type="text/css" id="style249-7"/><style type="text/css" id="style988-68"/><style type="text/css" id="style1092-90"/><style type="text/css" id="style1405-0"/><style type="text/css" id="style83-0"/><style type="text/css" id="style118-7"/><style type="text/css" id="style147-3"/><style type="text/css" id="style249-73"/><style type="text/css" id="style988-88"/><style type="text/css" id="style1092-6"/><style type="text/css" id="style1405-4"/><style type="text/css" id="style83-26"/><style type="text/css" id="style118-21"/><style type="text/css" id="style147-5"/><style type="text/css" id="style249-8"/><style type="text/css" id="style988-5"/><style type="text/css" id="style1092-0"/><style type="text/css" id="style1405-8"/><style type="text/css" id="style83-3"/><style type="text/css" id="style118-57"/><style type="text/css" id="style147-039"/><style type="text/css" id="style249-86"/><style type="text/css" id="style988-3"/><style type="text/css" id="style1092-2"/><style type="text/css" id="style1405-16"/><style type="text/css" id="style83-63"/><style type="text/css" id="style118-9"/><style type="text/css" id="style147-8"/><style type="text/css" id="style249-61"/><style type="text/css" id="style988-7"/><style type="text/css" id="style1092-62"/><style type="text/css" id="style1405-87"/><style type="text/css" id="style83-36"/><style type="text/css" id="style118-8"/><style type="text/css" id="style147-59"/><style type="text/css" id="style249-90"/><style type="text/css" id="style988-2"/><style type="text/css" id="style1092-71"/><style type="text/css" id="style1405-86"/><style type="text/css" id="style83-7"/><style type="text/css" id="style118-53"/><style type="text/css" id="style147-6"/><style type="text/css" id="style249-31"/><style type="text/css" id="style988-54"/><style type="text/css" id="style1092-73"/><style type="text/css" id="style1405-7"/><style type="text/css" id="style83-68"/><style type="text/css" id="style118-82"/><style type="text/css" id="style147-71"/><style type="text/css" id="style249-99"/><style type="text/css" id="style988-87"/><style type="text/css" id="style1092-96"/><style type="text/css" id="style1405-12"/><style id="style3616"></style><style type="text/css" id="style83-12"/><style type="text/css" id="style118-37"/><style type="text/css" id="style147-74"/><style type="text/css" id="style249-65"/><style type="text/css" id="style988-63"/><style type="text/css" id="style1092-1"/><style type="text/css" id="style1405-01"/><style type="text/css" id="style83-23"/><style type="text/css" id="style118-46"/><style type="text/css" id="style147-31"/><style type="text/css" id="style249-82"/><style type="text/css" id="style988-44"/><style type="text/css" id="style1092-58"/><style type="text/css" id="style1405-02"/><style id="style4023"/><style id="style4050"></style><style id="style4089"></style><style id="style4122"></style><style id="style4173"></style><style id="style4200"/><style id="style4410"></style><style type="text/css" id="style83-07"/><style type="text/css" id="style118-27"/><style type="text/css" id="style147-51"/><style type="text/css" id="style249-5"/><style type="text/css" id="style988-57"/><style type="text/css" id="style1092-72"/><style type="text/css" id="style1405-6"/><style id="style4700"></style><style type="text/css" id="style160"></style><style id="style5010"/><style type="text/css" id="style137"/><style type="text/css" id="style137-6"/><style type="text/css" id="style137-5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="80.615" viewBox="0 0 13.229 21.329" version="1.1" id="svg8"><defs id="defs2"><style id="style268"/><path id="b" d="M49.52 41c-.34-.19-.67-.38-1-.54-8.35-4.15-18.48-.75-22.63 7.6-4.15 8.35-.75 18.48 7.6 22.63 8.35 4.15 18.48.75 22.63-7.6 3.95-7.95 1.07-17.61-6.6-22.09z"/><path id="d" d="M94.16 41c-.34-.19-.68-.38-1-.54-8.32-4.14-18.41-.74-22.55 7.57-4.14 8.32-.74 18.41 7.57 22.55 8.32 4.14 18.41.74 22.55-7.57 3.94-7.92 1.07-17.54-6.57-22.01z"/><style id="style268-2"/><style id="style268-1"/><style id="style958"/><style id="style268-6"/><style id="style958-8"/><style id="style268-9"/><style id="style958-7"/><style id="style1087"></style><style id="style1185"></style><path id="a" d="M61.67 53.88c-8.51.05-17.01-.67-25.39-2.14a2.597 2.597 0 0 0-3 3C35.7 66.58 47.35 76.3 61.7 76.3c15.69 0 26.26-10 28.45-21.6a2.587 2.587 0 0 0-3-3c-8.41 1.49-16.94 2.22-25.48 2.18z"/><style id="style268-5"/><style id="style958-9"/><style id="style268-50"/><style id="style958-3"/><style id="style1920"></style><path id="f" d="M58.71 70.32c-6.6 0-7.69 7.56-6.11 11.88 1.58 4.32 6.27 7.33 10.45 6.91 14.99-1.51 18.75.94 20.71 5.4 2.69 6.16 5.92 6.47 9.2 6.07 4.8-.58 4.52-9.89 4.73-18.93.23-10.22-16.5-13.7-16.5-13.7s-19.32 2.37-22.48 2.37z"/><style id="style268-8"/><style id="style958-2"/><style id="style268-3"/><style id="style958-76"/></defs><g id="layer1" transform="translate(183.02 184.335)"><g id="g2007" transform="rotate(-45.001 -303.367 140.716) scale(.13475)"><path fill="#ca2c31" d="M3.77 71.73l16.34-16.1 27.82-4.93-2.75 14.56L7.57 76.82l-2.43-1.05z" id="path1924"/><path fill="#a02422" d="M22.94 59.76L5.2 75.88l13.05 6.36 19.81-10.11v-4.77l4.05-10.92z" id="path1926"/><path d="M64.92 88.15l-8.57 3.72-8.09 17.15s7.12 15.77 7.44 15.77c.32 0 4.37.32 4.37.32l14.4-16.1 3.64-27.5z" fill="#a02422" id="path1928"/><path d="M56.5 100.84s4.77-.97 8.17-2.59c3.4-1.62 7.6-4.04 7.6-4.04l-1.54 13.43-15.05 17.13s-.59-.73-3.09-6.17c-1.99-4.34-2.68-5.89-2.68-5.89z" fill="#ca2c31" id="path1930"/><path d="M31.58 80.66s-5.74-.48-12.03 7.47c-5.74 7.26-8.43 19.08-9.47 22.12-1.04 3.04-3.53 3.66-2.7 5.05.83 1.39 4.42 1.31 8.85.76s8.23-1.94 8.23-1.94-.19.48-.83 1.52c-.23.37-1.03.9-.97 1.45.14 1.31 11.36 1.34 20.32-7.88 9.68-9.95 4.98-18.11 4.98-18.11z" fill="#f7d74d" id="path1932"/><path d="M33.31 85.29s-6.19.33-11.31 8.28c-5.12 7.95-7.5 17.16-7.01 17.78.48.62 10.02-2.83 12.31-2.14 1.57.48.76 2.07 1.18 2.49.35.35 4.49.94 11.19-6.32 6.71-7.26 5.12-17.46 5.12-17.46z" fill="#fbf0b4" id="path1934"/><path d="M36.35 74.44s-3.11 2.77-4.22 4.36c-1.11 1.59-1.11 1.73-1.04 2.21.07.48 1.22 5.75 6.01 10.37 5.88 5.67 11.13 6.43 11.89 6.43.76 0 5.81-5.67 5.81-5.67z" fill="#858585" id="path1936"/><path d="M50.1 91.24s5.04 3.31 13.49.47c11.55-3.88 20.02-12.56 30.51-23.52 10.12-10.58 18.61-23.71 18.61-23.71l-5.95-19.93z" fill="#437687" id="path1938"/><path d="M67.99 80.33l1.39-4.32 3.48.49s2.65 1.25 4.6 2.16c1.95.91 4.46 1.6 4.46 1.6l-4.95 4.18s-2.7-1.02-4.67-1.88c-2.22-.97-4.31-2.23-4.31-2.23z" fill="#3f545f" id="path1940"/><path d="M84.32 16.14s-9.62 5.58-23.41 18.63c-12.43 11.76-21.64 22.4-23.87 31.45-1.86 7.58-.87 12.18 3.36 17.15 4.47 5.26 9.71 7.87 9.71 7.87s3.94.06 20.38-12.59C91 62.86 107.43 36.42 107.43 36.42z" fill="#8dafbf" id="path1942"/><path d="M104.18 41.84s-8.37-3.57-14.34-11.9c-5.93-8.27-5.46-13.86-5.46-13.86s4.96-3.89 16.11-8.34c7.5-2.99 17.71-4.52 21.07-2.03 3.36 2.49-2.3 14.98-2.3 14.98l-10.31 19.96z" fill="#d83f22" id="path1944"/><path d="M68.17 80.4s-7.23-3.69-11.83-8.94c-8.7-9.91-10.5-20.79-10.5-20.79l4.37-5.13S51.3 57.1 60.63 67.09c6.08 6.51 12.43 9.49 12.43 9.49s-1.27 1.07-2.63 2.11c-.87.67-2.26 1.71-2.26 1.71z" fill="#6896a5" id="path1946"/><path d="M112.71 44.48s4.34-5.23 8.45-17.02c5.74-16.44.74-21.42.74-21.42s-1.69 7.82-7.56 18.69c-4.71 8.71-10.41 17-10.41 17s3.14 1.41 4.84 1.9c2.14.62 3.94.85 3.94.85z" fill="#a02422" id="path1948"/><path d="M39.81 69.66c1.3 1.24 3.27-.06 4.56-3.1 1.3-3.04 1.28-4.74.28-5.46-1.24-.9-3.32 1.07-4.23 2.82-1 1.94-1.59 4.8-.61 5.74z" fill="#b3e1ee" id="path1950"/><path d="M84.95 20.13s-7.61 5.47-15.73 12.91c-7.45 6.83-12.39 12.17-13.07 13.41-.72 1.33-.73 3.21-.17 4.17.56.96 1.8 1.46 2.93.62 1.13-.85 9.18-9.75 16.45-16.11 6.65-5.82 11.78-9.51 11.78-9.51s2.08-3.68 1.74-4.52c-.34-.85-3.93-.97-3.93-.97z" fill="#b3e1ee" id="path1952"/><path d="M84.95 20.13s5.62-4.31 11.74-7.34c5.69-2.82 11.35-5.17 12.37-3.13.97 1.94-5.37 4.58-10.95 8.14-5.58 3.56-10.95 7.81-10.95 7.81s-.82-1.5-1.35-2.89a23.7 23.7 0 0 1-.86-2.59z" fill="#ed6a65" id="path1954"/><path d="M89.59 39.25c-5.57-5.13-13.32-3.75-17.14.81-3.92 4.7-3.63 11.88 1 16.2 4.21 3.92 12.04 4.81 16.76-.69 4.2-4.88 3.94-12.13-.62-16.32z" fill="#e1e1e1" id="path1956"/><path d="M75.33 41.87c-3.31 3.25-3.13 9.69.81 12.63 3.44 2.57 8.32 2.44 11.38-.69 3.06-3.13 3.06-8.82.19-11.76-3.3-3.37-8.59-3.9-12.38-.18z" fill="#3f545f" id="path1958"/><path d="M50 76.89s6.19-6.28 6.87-5.6c.68.68.59 4.49-2.37 8.73-2.97 4.24-9.5 11.79-14.67 16.88-5.1 5.01-12.29 10.74-12.97 10.64-.53-.08-2.68-1.15-3.54-2.19-.84-1.03 1.67-5.9 2.68-7.51 1.02-1.61 24-20.95 24-20.95z" fill="#a02524" id="path1960"/><path d="M21.23 101.85c-.08 1.44 2.12 3.54 2.12 3.54L56.87 71.3s-1.57-1.77-6.19 1.1c-4.66 2.9-8.74 6.38-14.76 12.21-8.39 8.14-14.61 15.8-14.69 17.24z" fill="#ca2c31" id="path1962"/><path d="M19.06 36.95c-1.11 1.11-1.16 2.89.08 3.91 1.1.91 2.89.32 3.56-.5.67-.82.59-2.6-.3-3.48-.89-.89-2.66-.6-3.34.07z" fill="#fff" id="path1964"/><path d="M41.02 35.65c-.84.93-.57 2.31.21 2.82.78.51 1.95.46 2.52-.24.51-.63.57-1.89-.21-2.67-.68-.67-1.98-.51-2.52.09z" opacity=".5" fill="#fff" id="path1966"/><path d="M55.55 11.89s1.22-3.48 1.94-3.52c.73-.04 1.78 3.48 1.78 3.48s3.61.04 3.85.57c.31.68-2.31 2.96-2.31 2.96s.85 3.4.45 3.81c-.45.45-3.56-1.34-3.56-1.34s-3.2 2.23-3.89 1.62c-.6-.53.65-4.13.65-4.13s-3-2.19-2.84-2.8c.23-.86 3.93-.65 3.93-.65z" fill="#fff" id="path1968"/><path d="M97.01 95.33c1.21.67 2.73.29 3.29-1 .51-1.15-.43-2.52-1.28-2.89-.85-.37-2.34.12-2.88 1.09-.53.96.14 2.4.87 2.8z" fill="#fff" id="path1970"/><path d="M114.19 65.84c-.69-1.07-2.18-1.42-3.15-.56-.94.84-.71 2.16-.18 2.83.53.67 1.95.92 2.81.37.86-.55.94-2 .52-2.64z" fill="#fff" id="path1972"/></g></g><style id="style189"></style><style type="text/css" id="style83"/><style type="text/css" id="style118"/><style type="text/css" id="style147"/><style type="text/css" id="style249"/><style type="text/css" id="style988"/><style type="text/css" id="style1092"/><style type="text/css" id="style83-1"/><style type="text/css" id="style118-3"/><style type="text/css" id="style147-7"/><style type="text/css" id="style249-3"/><style type="text/css" id="style988-9"/><style type="text/css" id="style1092-3"/><style type="text/css" id="style83-4"/><style type="text/css" id="style118-2"/><style type="text/css" id="style147-0"/><style type="text/css" id="style249-4"/><style type="text/css" id="style988-6"/><style type="text/css" id="style1092-4"/><style id="style1442"></style><style id="style1460"></style><style id="style1484"/><style type="text/css" id="style83-6"></style><style type="text/css" id="style118-20"></style><style type="text/css" id="style147-03"></style><style type="text/css" id="style249-9"/><style type="text/css" id="style988-8"/><style type="text/css" id="style1092-7"></style><style type="text/css" id="style1405"></style><style id="style1588"></style><style id="style1619"></style><style id="style1647"></style><style id="style1672"></style><style type="text/css" id="style83-5"/><style type="text/css" id="style118-5"/><style type="text/css" id="style147-9"/><style type="text/css" id="style249-6"/><style type="text/css" id="style988-4"/><style type="text/css" id="style1092-9"/><style type="text/css" id="style1405-1"/><style type="text/css" id="style83-8"/><style type="text/css" id="style118-4"/><style type="text/css" id="style147-91"/><style type="text/css" id="style249-1"/><style type="text/css" id="style988-92"/><style type="text/css" id="style1092-5"/><style type="text/css" id="style1405-5"/><style type="text/css" id="style83-2"/><style type="text/css" id="style118-6"/><style type="text/css" id="style147-4"/><style type="text/css" id="style249-7"/><style type="text/css" id="style988-68"/><style type="text/css" id="style1092-90"/><style type="text/css" id="style1405-0"/></svg>
Scroll To Top icon pack
If this article is difficult for you to read in text, you can watch the video version below.
Many thanks. Where the for example the back-to-top icon 2 is used – is there a way to alter the colour? After a bit of experimentation I did a search and replace and replaced the 5 instances of: <path
with
<path fill="#990000"
which has worked.
Haven't yet worked out how to replace <path fill="#990000" with a variable – sat <path fill="back-to-top_icon_color" and define the color with the other variables of $location or $scale
thank you very much! it was so useful