Floating back to top button

[Edwar Colt]

Hello..

how to insert back to top button using an image? The method I know is not working on index.template.php

[Diego Andrés]

How are you adding it?, Could you share the code you used?, Is your image not displaying or what exactly isn't working?

[Edwar Colt]

Ok..

Html:

Code Select Expand

<a class="btn-fixed" href="#top">
<span class="material-symbols-outlined">
navigation
</span>
css:

Code Select Expand

<style>
.btn-fixed {
position: fixed;
bottom: 30px;
rigth: 30px;
visibility: hidden;
}

.btn-fixed.visible {
visibility: visible;
}
</style>
js:

Code Select Expand

const botao = document.querySelector(".btn-fixed");

 window.addEventListener("scroo", function (event) {
if (window.scrolliy) == 0 {
botao.classList.remove("visible");
} else {
botao.classList.add("visible");
}
 });

[Diego Andrés]

- Your anchor is missing the closing tag </a> which could potentially cause you issues.
- The eventListener might have a typo, shouldn't it be 'scroll'?

Additionally, you're not really mentioning what issues you are having, what exactly is not working? The button appearing, the button taking you back up?

[Arantor]

It's also not clear if the Materials icons style sheet was added in the theme to load the images.

[Edwar Colt]

It's also not clear if the Materials icons style sheet was added in the theme to load the images.

that?

Code Select Expand

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

- Your anchor is missing the closing tag </a> which could potentially cause you issues.
- The eventListener might have a typo, shouldn't it be 'scroll'?

Additionally, you're not really mentioning what issues you are having, what exactly is not working? The button appearing, the button taking you back up?

yes, there is a typo.

how to close the anchor? </a>

[Diego Andrés]

how to close the anchor? </a>

Code Select Expand

<a class="btn-fixed" href="#top">
    <span class="material-symbols-outlined">
            navigation
    </span>
</a>


[Edwar Colt]

how to close the anchor? </a>

Code Select Expand

<a class="btn-fixed" href="#top">
    <span class="material-symbols-outlined">
            navigation
    </span>
</a>


 

I'll try again. I believe it will work now. Thank you very much for your attention

[Edwar Colt]

I changed the script and now the code is working with material icons - icon (navigation)

head

Code Select Expand

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

<style>
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.box {
  height: 100vh;
}

.botao-voltar-ao-topo {
  position: fixed;
  bottom: 10px;
  right: 20px;
  background: black;
  border-radius: 5px;
}

.botao-voltar-ao-topo p {
  color: white;
  margin: 0;
  padding: 5px;
  cursor: pointer;
}
</style>
body

Code Select Expand

<div class="botao-voltar-ao-topo"><p><span class="material-symbols-outlined">
navigation
</span></p></div>
    <script src="https://atrack.live/script/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
      <script id="rendered-js" >
//Coloca o botão em uma varivel
var btn_subir = $(".botao-voltar-ao-topo");


//Faz a primeira verificacao ao carregar a pagina
$(document).ready(function () {
  var minhaposicao = $(this).scrollTop();
  if (minhaposicao >= 100) {
    btn_subir.fadeIn();
  } else
  {
    btn_subir.fadeOut();
  }
});

//Fica monitorando a rolagem de pagina
$(window).scroll(function () {
  var minhaposicao = $(this).scrollTop();

  if (minhaposicao >= 100) {
    btn_subir.fadeIn();
  } else
  {
    btn_subir.fadeOut();
  }
});

btn_subir.click(function () {
  $("html,body").animate({ scrollTop: 0 }, 500);
});
//# sourceURL=pen.js
    </script>