ساخت اسکرول به بالا (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;
}

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

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

دموی برنامه

فایل index.html

اسکریپت app.js

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

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید . لغو پاسخ