Wapkiz Back to Top Button Code – Add Floating Scroll to Top in Your Website

Wapkiz Back to Top Button Code

Adding a Back to Top Button in your Wapkiz site makes it easy for visitors to quickly scroll back to the top of long pages. This improves the user experience and gives your site a more professional and modern look. Let’s see how to add a floating Back to Top button using simple code.

HTML Code for Back to Top Button

Place the following HTML code in your Wapkiz site. This will create a floating button that stays fixed at the bottom right corner of the screen.

Code Paste In footer

<a href="#top" class="floating-icon" title="Go to Top">
  <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="#fff" viewBox="0 0 16 16">
    <path d="M8 3.293l5.146 5.147-.708.707L8 4.707 3.562 9.147l-.708-.707L8 3.293z"/>
  </svg>
</a>

Related Posts

CSS Code for Styling the Button

This CSS will style the button to look round, add a shadow, and make it slightly bigger on hover for a smooth modern effect.

<style>
.floating-icon {
  position: fixed;
  bottom: 60px;
  right: 20px;
  background: #007bff;
  padding: 12px;
  border-radius: 50%;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.floating-icon:hover { 
  transform: scale(1.1); 
}
.floating-icon svg { 
  display: block; 
}
</style>

Optional JavaScript for Smooth Scroll

By default, the link will jump instantly to the top. If you want a smooth scrolling effect and to show/hide the button when scrolling, add this JavaScript code.

<script>
(function(){
  const btn = document.querySelector('.floating-icon');
  const showAfter = 200;

  window.addEventListener('scroll', () => {
    if (window.scrollY > showAfter) {
      btn.style.display = 'flex';
    } else {
      btn.style.display = 'none';
    }
  });

  btn.addEventListener('click', function(e){
    e.preventDefault();
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
})();
</script>

Final Words

The Back to Top Button is a simple but very useful feature for Wapkiz websites. It enhances user navigation, improves engagement, and makes your website look modern. With just a few lines of HTML, CSS, and optional JavaScript, you can add this feature to your site within minutes.