ساخت اسکرول به بالا (scroll to top) با جاوا اسکریپت

ساخت اسکرول به بالا (scroll to top) با جاوا اسکریپت

اسکرول به بالا جاوا اسکریپت – با کمک جاوا اسکریپت و بدون هیچ کتابخانه ای می خواهیم اسکرول به بالا را با یک انیمیشن زیبا ایجاد کنیم آن هم به صورت حرفه ای و شیک .

دکمه اسکرول به بالا طوری برنامه نویسی می کنیم زمانی که مقداری به پایین صفحه آمد دکمه چرخیده و رنگ کم رنگ آن پر رنگ شده و آماده اسکرول باشد .


دموی برنامه


فایل index.html

<!DOCTYPE html>
<html lang="fa">

<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/main.css">
</head>

<body>
    <div class="container">
        <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>
        <div class="scroll-top"></div>
        <section class="content content-1"></section>
        <section class="content content-2"></section>
        <section class="content content-3"></section>
        <section class="content content-4"></section>
    </div>
    <script src="static/js/app.js"></script>
</body>

</html>


اسکریپت app.js

// DOM
const scrollToTopDOM = document.getElementsByClassName('scroll-top')[0];
let scrollToTopDOMActive = null;


// property
const maxDegreeRotate = 180;
let isScrolling = false;


// set handlers
window.onscroll = windowOnScrollHandler;
scrollToTopDOM.onclick = scrollToTopDOMClickHandler;


// handlers

function windowOnScrollHandler(event) {
    const thisElement = this;
    const offsetScrollY = parseInt(thisElement.scrollY);

    let finallDegreeRotate = offsetScrollY / 8;

    if (maxDegreeRotate < finallDegreeRotate) {
        finallDegreeRotate = maxDegreeRotate;
        if (!isScrolling) {
            scrollToTopDOM.classList.add('active');
        }

    } else {
        scrollToTopDOM.classList.remove('active');
    }

    scrollToTopDOM.style.transform = `rotate(${finallDegreeRotate}deg)`;
}

function scrollToTopDOMClickHandler(event) {

    if (!isScrolling && scrollToTopDOM.classList.contains("active") && 0 < window.scrollY) {
        isScrolling = true;
        scrollToTopDOM.classList.remove('active');
        scrollToTopDOMScrollAnimation();
    }

}

function scrollToTopDOMScrollAnimation(){
	if(window.scrollY <= 0){
		isScrolling = false;
		return false;
	}


	window.scrollBy(0, -50);
	setTimeout(scrollToTopDOMScrollAnimation, 1000 / 60);
}


استایل برنامه با main.css

.content {
    width: 100%;
    height: 1200px;
    background-color: gray;
}

.content-1 {
    background-color: cyan;
}

.content-2 {
    background-color: tomato;
}

.content-3 {
    background-color: lime;
}

.content-4 {
    background-color: magenta;
}

.scroll-top {
    width: 60px;
    height: 60px;
    background-image: url(../img/arrow.png);
    background-size: 43px;
    background-position: center;
    background-repeat: no-repeat;
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 15;
    cursor: pointer;
    opacity: 0.5;
}

.scroll-top.active{
    opacity: 1;
}


دانلود سورس اسکرول به بالا جاوا اسکریپت

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us

پکیج غول آموزش برنامه نویسی PHP با ساخت فروشگاه { دیجیکالا }


This will close in 0 seconds