How to add responsive sticky To Top button with scroll progress

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How to add responsive sticky To Top button with scroll progress

Benefits :-

1. Responsive Design & Sticky Place
2. Smooth back to top button with scroll page

How to add responsive sticky To Top button with scroll progress :-

<style>.tTpB{justify-content:center;position:fixed;right:20px;width:45px;height:45px;border-radius:50%;cursor:pointer;visibility:hidden;opacity:0;z-index:9999;transform:scale(0);transition:transform .3s ease,opacity .3s ease,visibility .3s ease,margin-bottom 1s ease}.tTpB.vbl{visibility:visible;opacity:1;transform:scale(1)}.tTpB{bottom:20px}.tTpB:hover{opacity:.8}.tTpB svg{height:100%;width:100%;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;cursor:pointer}.tTpB svg .b{fill:#fff;stroke:#e6e6e6;opacity:.9}.tTpB svg .c{fill:none;stroke:#482dff;stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round}.tTpB svg .d{fill:none;stroke:#08102b}.dark .tTpB svg .b{fill:#2d2d30;stroke:#404045}.dark .tTpB svg .c{stroke:#8775f5}.dark .tTpB svg .d{stroke:#fffdfc}.tTpB{display:flex;align-items:center}</style>

<div class="tTpB" id="backTop" onclick="window.scrollTo({top: 0});">
  <svg viewBox="0 0 34 34">
    <circle class="b" cx="17" cy="17" r="15.92"></circle>
    <circle class="c scrollProgress" cx="17" cy="17" r="15.92"></circle>
    <path class="line d" d="M15.07,21.06,19.16,17l-4.09-4.06"></path>
  </svg>
</div>

<script type="text/javascript">
   //<![CDATA[
  	var progressPath = document.querySelector(".scrollProgress");
  	var pathLength = progressPath.getTotalLength();

  	progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
  	progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
  	progressPath.style.strokeDashoffset = pathLength;
  	progressPath.getBoundingClientRect();
  	progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';

  	var updateProgress = function() {
  		var scroll = document.documentElement.scrollTop;
  		var height = document.documentElement.scrollHeight - window.innerHeight;
  		var progress = pathLength - (scroll * pathLength / height);
  		progressPath.style.strokeDashoffset = progress;
  	}

  	updateProgress();
  	window.addEventListener('scroll', (updateProgress));

  	var offset = 0;
  	var duration = 550;

  	window.onscroll = function() {
  		 if (document.documentElement.scrollTop > offset) {
  			document.querySelector('.tTpB').classList.add('vbl');
  		} else {
  			document.querySelector('.tTpB').classList.remove('vbl');
  		}
  	};

  	document.querySelector('.tTpB').onclick = function() {
  		document.querySelector('html, body').animate(window.scroll({
             top: ['8px', '280px']
                },{ duration: 2500,        // number in ms [this would be equiv of your speed].
                    easing: 'ease-in-out',
                    iterations: 1,         // infinity or a number.
                 // fill: ''
       }));
  		return false;
  	};
  //]]>
</script>

Conclusion

In this post, I have talked about How to add responsive sticky To Top button with scroll progress. Tell us What You Say About The Post by Making a Comment and if you have any questions Contact Us at the Contact Us page. Hope You Enjoy In Our Website.

Refrence:
https://www.wolvthemes.xyz/2022/06/how-to-add-responsive-sticky-to-top.html

Our Posts Are Protected By DMCA.com. Don't Copy Our Post. Wolv Themes All Rights Reversed.