// ===== Scroll to Top ====  
const scrollTop = document.getElementById('scrolltop')  
  
// When the page is loaded, hide the scroll-to-top button  
window.onload = () => {  
 scrollTop.style.visibility = "hidden";  
 scrollTop.style.opacity = 0;  
}  
  
// If the page is scrolled more than 200px,  
// display the scroll-to-top button  
// Otherwise keep the button hidden  
window.onscroll = () => {  
 if (window.scrollY > 200) {  
 scrollTop.style.visibility = "visible";  
 scrollTop.style.opacity = 1;  
 } else {  
 scrollTop.style.visibility = "hidden";  
 scrollTop.style.opacity = 0;  
 }  
};

html {  
 scroll-behavior: smooth;  
}  
  
#scrolltop {  
 display: block;  
 visibility: visible;  
 opacity: 1;  
 transition: visibility 0s, opacity 0.5s ease-in;  
 position: fixed;  
 bottom: 20px;  
 right: 20px;  
 background: rgba(255, 255, 255, 0.4);  
 border-radius: 20%;  
}  
  
.top-button {  
 text-decoration: none;  
 cursor: pointer;  
 padding: 30px;  
 color: #222;  
}  
  
body {  
 background: linear-gradient(180deg, #0697f9 0%, #f898bf 100%);  
 color: #fff;  
 font-family: 'Quicksand', sans-serif;  
 font-size: 24px;  
 line-height: 1.4;  
 text-align: center;  
 padding: 40px;  
}  
  
.long-text {  
 max-width: 700px;  
 margin: 0 auto;  
 padding: 40px;  
 background: rgba(0, 0, 0, 0.2);  
}

  
  
  
  
   
   
   
   
   
   
  
  
  

  
   
  
  

  
 
  
 
Back to Top Button
  
 
Scroll down the page
  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.  
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.  
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.  
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.  
 
  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.  
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.  
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.  
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.  
 
  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.  
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.  
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.  
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.  
 
  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.  
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.  
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.  
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.  
 
  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.  
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.  
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.  
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.  
 
  
 
  
   
  
  

// ===== Scroll to Top ====  
var btn = $('#button');  
  
// If the page is scrolled more than 300px,  
// show the scroll-to-top button  
// Otherwise hide the button  
$(window).scroll(function() {  
 if ($(window).scrollTop() > 300) {  
 btn.addClass('show');  
 } else {  
 btn.removeClass('show');  
 }  
});  
  
btn.on('click', function(e) {  
 e.preventDefault();  
 $('html, body').animate({scrollTop:0}, '300');  
});

#button {  
 display: inline-block;  
 background-color: #FF9800;  
 width: 50px;  
 height: 50px;  
 text-align: center;  
 border-radius: 4px;  
 position: fixed;  
 bottom: 30px;  
 right: 30px;  
 transition: background-color .3s,  
 opacity .5s, visibility .5s;  
 opacity: 0;  
 visibility: hidden;  
 z-index: 1000;  
}  
  
#button::after {  
 content: "\f077";  
 font-family: FontAwesome;  
 font-weight: normal;  
 font-style: normal;  
 font-size: 2em;  
 line-height: 50px;  
 color: #fff;  
}  
  
#button:hover {  
 cursor: pointer;  
 background-color: #333;  
}  
  
#button:active {  
 background-color: #555;  
}  
  
#button.show {  
 opacity: 1;  
 visibility: visible;  
}  
  
/* Styles for the content section */  
.content {  
 width: 77%;  
 margin: 50px auto;  
 font-family: 'Merriweather', serif;  
 font-size: 17px;  
 color: #6c767a;  
 line-height: 1.9;  
}  
  
@media (min-width: 500px) {  
 .content {  
 width: 43%;  
 }  
  
#button {  
 margin: 30px;  
}  
}  
  
.content h1 {  
 margin-bottom: -10px;  
 color: #03a9f4;  
 line-height: 1.5;  
}  
  
.content h3 {  
 font-style: italic;  
 color: #96a2a7;  
}

▲

#toTop{position:fixed;right:16px;bottom:16px;display:none;padding:10px;border-radius:6px}
#toTop.show{display:block}

const btn=document.getElementById('toTop');window.addEventListener('scroll',()=>{if(window.scrollY>250)btn.classList.add('show');else btn.classList.remove('show')});btn.addEventListener('click',()=>window.scrollTo({top:0,behavior:'smooth'}));