Back to top #back2top #wp #hook

back2top.php

<?php
//add the hook in page.php after entry-content
/* <?php do_action('si_after_entry_content_action'); ?>*/

// Back to Top
add_action( 'si_after_entry_content_action', function () {  if ( !is_admin() ) {

?>
<div id="back-to-top" class="back-to-top" > 
<!--add image here-->
</div>
<style>
  /* Back To Top */
.back-to-top.active-to-top {
    pointer-events: auto;
    opacity: 1;
}
.back-to-top {
    position: fixed;
    bottom: 5rem;
    right: 1.39rem;
    display: flex;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: all .4s;
    z-index: 20;
    cursor: pointer;
    border: 0.111rem solid var(--white);
    border-radius: 50%;
    background: var(--blue);
}
.back-to-top:hover {
    animation: btt 1s linear infinite alternate;
}
@keyframes btt {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {

var back2top = document.getElementById("back-to-top");

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
	
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
	  if(back2top)
    back2top.classList.add('active-to-top');
  } else {
	  if(back2top)
    back2top.classList.remove('active-to-top');
  }
}

// Scroll to top on button click
if(back2top)
back2top.addEventListener('click',function(){
    window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
});
	
	
</script>
  
<?php }},100);