(()=>{
    const elementBuild = (type, attrs, content) => {
        var el = document.createElement(type)
        if (attrs) {
            for (var key in attrs) {
                el.setAttribute(key, attrs[key]);
            }
        }
    
        if (content != null) {
            el.insertAdjacentElement('afterbegin', content)
        }
        return el
    }
    let css = `
    .scrollBtn span.fa.fa-arrow-up {
        margin-left: 5px;
    }
    .scrollBtn {
        position: fixed;
        bottom: 100px;
        background: #d6d5d5bf;
        height: 50px;
        width: 50px;
        right: 0px;
        display: flex;
        justify-content: center;
        font-size: 1.7em;
        box-shadow: 0px 0px 4px #00000073;
        align-items: center;
        cursor: pointer;
        transition: .5s ease
    }
    .offscreen {
        transform: translateX(60px);
    }
     html{
     scroll-behavior: smooth;
     }
    `
        
    let cstBtnSheet = document.createElement('style')
    cstBtnSheet.appendChild(document.createTextNode(css))
    document.head.appendChild(cstBtnSheet)
    
    let scrollUp=()=>window.scrollTo(0,0);
    var scrP = window.scrollY;
    let arrow = elementBuild('div',{'class':'fa fa-arrow-up'})
    let scrollBtn = elementBuild('div',{'class':'scrollBtn offscreen'},arrow)
    document.body.insertAdjacentElement('beforeend', scrollBtn)
    let scrollYCheck = ()=>{
        if(window.scrollY > 700){
         scrollBtn.classList.remove('offscreen')
        }else{
         scrollBtn.classList.add('offscreen')
        }
       }
     scrollBtn.addEventListener('click', scrollUp);
     window.scrollTo({behavior:'smooth'});
     window.addEventListener('scroll', scrollYCheck );
})()