How to add responsive sticky To Top button with scroll progress

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
Let's Start
Demo

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

Step 1 :- Go to Blogger's dashboard and click theme.
Step 2 :- Click the arrow down icon next to the 'customize' button.
Step 3 :- Click Edit Html.
Step 4 :- Click on any word then Press CTRL+ F and type in the search form ]]></b:skin>.
Step 5 :- Copy the provided below code and paste it just before ]]></b:skin>.

<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>
Step 6 :- Replace all the blue background marked parts according to your theme.

Step 7 :- Add this Html code wherever you want to use it

<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>
Step 8 :- Copy the provided below code and paste it just before </body>.
<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.

Rate this article

Frontend Developer and UX Designer

1 comment

  1. How to add responsive sticky To Top button with scroll progress
    Problem found
    Please message me on telegram
    @monishtips17
    Or
    https://t.me/monishtips17

    Please