article

ساخت دکمه رفتن به بالای صفحه (Scroll to Top) با جاوا اسکریپت

javascript-go-to-top

یکی از کاربردهای جاوا اسکریپت (JavaScript) در صفحات وب امکان ساخت دکمه های کنترلی برای ایجاد رابط کاربری (User Interface) بهینه است، طراحان وب جهت زیباسازی و تجهیز قالب ها معمولا از امکانات مبتنی بر قابلیت های سمت کاربر و مرورگر استفاده می کنند که یکی از این قابلیت های پرکاربرد ساخت دکمه رفتن به بالای صفحه یا در اصطلاح اسکرول به بالا (Scroll to Top) در گوشه پائین نمایشگر است که بخصوص در مورد صفحات با ارتفاع خیلی زیاد می تواند ابزاری خوب و کاربردی باشد، خوشبختانه برای ایجاد این قابلیت چند روش مختلف از قبیل لینک ساده، کدهای صرف جاوا اسکریپت و توابع جی کئوری قابل استفاده است که در این آموزش به صورت موردی به آنها خواهیم پرداخت.

رفتن به بالای صفحه با آی دی و لینک ساده


ساده ترین روش ساخت قابلیت رفتن به بالای صفحه استفاده از پارامتر آی دی و تگ a در HTML است، در این روش ابتدا به تگ div مورد نظر (یا هر تگ مشابه دیگری) در بالای صفحه id اختصاص داده و سپس در انتهای صفحه با تگ a و پارامتر href به آی دی مورد نظر ارجاع می دهیم، در این حالت با کلیک کاربر بر روی لینک، مرورگر محدوده نمایش صفحه را به محل آی دی تعیین شده هدایت می کند، نمونه کد زیر گویا است.
<div id="block"></div>
<a href="#block">رفتن به بالای صفحه</a>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | رفتن به بالای صفحه با لینک ساده و آی دی</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
.block{
    display: block;
    height: 1500px;
    width: 80%;
    color: #FFFFFF;
    background-color: #528CDB;
    border:1px solid #2C40B4;
    clear: both;
    padding: 4px;
    margin-left: auto;
    margin-right: auto;
}
a{
    text-decoration:none;
}
</style>
</head>
<body>
<div id="block" class="block">برای تست کد، به پائین صفحه اسکرول کنید!</div>
<a href="#block">&uarr; رفتن به بالای صفحه</a>
<hr>
از روش آی دی و لینک ساده می توانیم برای موارد مشابه و هدایت کاربر به بخش خاصی از صفحه نیز استفاده کنیم، به طور مثال این روش برای ارجاع به پاراگراف یا یادداشت خاصی در صفحه کاربرد دارد.
</body>
</html>
پیش نمایش
این روش ساده  ترین شکل ارجاع به بخش خاصی از صفحه است که در جای خود می تواند بسیار کاربردی باشد.

رفتن به بالای صفحه با لینک و جاوا اسکریپت


استفاده از تگ a و ایجاد لینک ارجاع به بالای صفحه محدود به تعریف آی دی نمی شود، با استفاده از متد window.scroll در جاوا اسکریپت نیز می توانیم حالت مشابه را در صفحات وب ایجاد کنیم، این روش در حالتی که به هر دلیلی نخواهیم یا نتوانیم از آی دی استفاده کنیم کاربرد دارد، متد window.scroll با دو آرگیومنت جهت تعیین مختصات فراخوانی می شود که عدد اول محور X ها و عدد دوم محور Y ها را مشخص می کند.
<a href="#" onclick="window.scroll(0, 0); return false;">رفتن به بالای صفحه</a>

<a href="JavaScript:void(0);" onclick="window.scroll(0, 0); return false;">رفتن به بالای صفحه</a>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | رفتن به بالای صفحه با لینک ساده و جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
.block{
    display: block;
    height: 1500px;
    width: 80%;
    color: #FFFFFF;
    background-color: #9A2F99;
    border:1px solid #5D055F;
    clear: both;
    padding: 4px;
    margin-left: auto;
    margin-right: auto;
}
a{
    text-decoration:none;
}
</style>
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است!</noscript>
<div id="block" class="block">برای تست کد، به پائین صفحه اسکرول کنید!</div>
<a href="JavaScript:void(0);" onclick="window.scroll(0, 0); return false;">&uarr; رفتن به بالای صفحه - روش JavaScript:void</a>
<br>
<br>
<a href="#" onclick="window.scroll(0, 0); return false;">&uarr; رفتن به بالای صفحه - روش آی دی خالی</a>
<br>
<br>
<a href="#block" onclick="window.scroll(0, 0); return false;">&uarr; رفتن به بالای صفحه - روش ترکیبی</a>
<hr>
اشکال استفاده از روش جاوا اسکریپت این است که اگر این امکان در مرورگر کاربر غیرفعال باشد لینک عمل نخواهد کرد، برای رفع مشکل می توانیم علاوه بر نمایش پیام غیرفعال بودن جاوا اسکریپت، روش آی دی را با این روش ترکیب کنیم!
</body>
</html>
پیش نمایش
توضیح:
- هر دو کد بالا کارکردی مشابه دارند و تنها تفاوت نمایش عبارتی است که در هنگام کلیک کاربر در نوار وضعیت مرورگر نمایش داده می شود، لذا انتخاب یک حالت اختیاری است.
- در کد اول برای پارامتر href مقدار # را قرار داده ایم  که در واقع ارجاع به آی دی خالی و لینک غیر واقعی است، این نوع لینک توسط ربات های جستجوگر نیز دنبال نمی شود، همین کار در کد دوم با استفاده از جاوا اسکریپت خطی و عبارت JavaScript:void با مقادیر صفر انجام شده است، void به معنی پوچ و بدون مصرف است که این متد معمولا در مواقعی که نخواهیم عملیاتی توسط مفسر صورت گیرد یا حالت پیش فرض نادیده گرفته شود، استفاده می شود.
- متد window.scroll با رویداد onclick (یک بار کلیک کاربر) مقادیر X برابر صفر و Y برابر صفر را به مرورگر می دهد (نقطه صفر از محور X و Y که در واقع همان بالای صفحه است).
- عبارت return false برای غیر فعال کردن حالت پیش فرض رفتار مرورگر در مورد لینک ها است، در حالت معمول مرورگرها از مقادیر href لینک ها پیروی و کاربر را به آدرس تعیین شده هدایت می کنند، اما با قرار دادن عبارت return false در انتهای دستور رفتار پیش فرض مروگرها تغییر کرده و کاربر را به صفحه دیگر منتقل نمی کنند (مگر اینکه در دستورات جاوا اسکریپت دستور دیگری بدین منظور در نظر گرفته شده باشد).

رفتن به بالای صفحه به همراه افکت اسکرول با لینک و جاوا اسکریپت


روش هایی که بررسی شدند ساده و کاربردی هستند اما علاوه بر این حالت ساده و معمول، می توانیم با کمک دستورات جاوا اسکریپت توابعی بنویسیم که جلوه ای زیبا و به اصطلاح افکتی نیز در هنگام اسکرول کاربر به بالای صفحه ایجاد کنند، برای ایجاد این جلوه انیمیشنی از متدهای صرف جاوا اسکریپت (JavaScript Pure) استفاده کرده ایم.
ابتدا توابع جاوا اسکریپتی زیر را ترجیحا بین تگ head صفحه وب کپی می کنیم، این توابع برای انجام محاسبات و ایجاد اسکرول به اصطلاح نرم (Smooth) نوشته شده اند، این کد با تمام مرورگرها سازگار شده است.
<script type="text/javascript">
function currentYPosition(){
    //Firefox, Chrome, Opera, Safari
    if(self.pageYOffset){
        return self.pageYOffset;
    }
    
    //Internet Explorer 6
    if(document.documentElement && document.documentElement.scrollTop){
        return document.documentElement.scrollTop;
    }
    
    //Internet Explorer 6, 7 and 8
    if(document.body.scrollTop){
        return document.body.scrollTop;
    }
    
    return 0;
}

function elmYPosition(id){
    var elm = document.getElementById(id);
    var y = elm.offsetTop;
    var node = elm;
    
    while(node.offsetParent && node.offsetParent != document.body){
        node = node.offsetParent;
        y += node.offsetTop;
    }
    
    return y;
}
function smoothScroll(id) {
    var startY = currentYPosition();
    var stopY = elmYPosition(id);
    var distance = stopY > startY ? stopY - startY : startY - stopY;
    
    if(distance < 100){
        scrollTo(0, stopY);
        return;
    }
    
    var speed = Math.round(distance / 100);
    
    if(speed >= 20){
        speed = 20;
    }
    
    var step = Math.round(distance / 25);
    var leapY = stopY > startY ? startY + step : startY - step;
    var timer = 0;
    
    if(stopY > startY){
        for(var i = startY; i < stopY; i += step){
            setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
            leapY += step;
            if(leapY > stopY){
                leapY = stopY;
                timer++;
            }
        }
        
        return;
    }
    
    for(var i = startY; i > stopY; i -= step) {
        setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
        leapY -= step;
        
        if(leapY < stopY){
            leapY = stopY;
            timer++;
        }
    }
}
</script>
سپس در بالاترین قسمت صفحه خود بعد از تگ body بلاکی با آی دی دلخواه می سازیم، به طور مثال در زیر بلاک div با آی دی فرضی block را ساخته ایم.
<div id="block"></div>
در نهایت در پائین ترین قسمت صفحه وب خود لینک یا دکمه ای می سازیم و تابع smoothScroll را با آن فراخوانی می کنیم.
<a href="#block" onclick="smoothScroll('block'); return false;">رفتن به بالای صفحه</a>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | رفتن به بالای صفحه با لینک ساده و جاوا اسکریپت به همراه افکت اسکرول</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
.block{
    display: block;
    height: 1500px;
    width: 80%;
    color: #FFFFFF;
    background-color: #51A235;
    border:1px solid #0E6B00;
    clear: both;
    padding: 4px;
    margin-left: auto;
    margin-right: auto;
}
a{
    text-decoration:none;
}
</style>
<script type="text/javascript">
function currentYPosition(){
    //Firefox, Chrome, Opera, Safari
    if(self.pageYOffset){
        return self.pageYOffset;
    }
    
    //Internet Explorer 6
    if(document.documentElement && document.documentElement.scrollTop){
        return document.documentElement.scrollTop;
    }
    
    //Internet Explorer 6, 7 and 8
    if(document.body.scrollTop){
        return document.body.scrollTop;
    }
    
    return 0;
}

function elmYPosition(id){
    var elm = document.getElementById(id);
    var y = elm.offsetTop;
    var node = elm;
    
    while(node.offsetParent && node.offsetParent != document.body){
        node = node.offsetParent;
        y += node.offsetTop;
    }
    
    return y;
}
function smoothScroll(id) {
    var startY = currentYPosition();
    var stopY = elmYPosition(id);
    var distance = stopY > startY ? stopY - startY : startY - stopY;
    
    if(distance < 100){
        scrollTo(0, stopY);
        return;
    }
    
    var speed = Math.round(distance / 100);
    
    if(speed >= 20){
        speed = 20;
    }
    
    var step = Math.round(distance / 25);
    var leapY = stopY > startY ? startY + step : startY - step;
    var timer = 0;
    
    if(stopY > startY){
        for(var i = startY; i < stopY; i += step){
            setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
            leapY += step;
            
            if(leapY > stopY){
                leapY = stopY;
            }
            
            timer++;
        }
        
        return;
    }
    
    for(var i = startY; i > stopY; i -= step) {
        setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
        leapY -= step;
        
        if(leapY < stopY){
            leapY = stopY;
        }
        
        timer++;
    }
}
</script>
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است!</noscript>
<div id="block" class="block">برای تست کد، به پائین صفحه اسکرول کنید!</div>
<a href="#block" onclick="smoothScroll('block'); return false;">&uarr; رفتن به بالای صفحه</a>
<hr>
برای ایجاد حالت فریم به فریم در این کد از تابع setTimeout استفاده شده است، این تابع با ایجاد وقفه های  پی در پی  مشخص شده در آرگیومنت دوم، اسکرول به بالا را انجام می دهد که نتیجه به صورت انیمیشن نرم خواهد بود.
</body>
</html>
پیش نمایش
توضیح:
- کد بالا از سه تابع تشکیل شده که تابع currentYPosition موقعیت کنونی محور Y را محاسبه، تابع elmYPosition موقعیت بلاک مقصد را تعیین و در نهایت smoothScroll حالت اسکرولی نرم از پائین به بالای صفحه را ایجاد می کند.
- سرعت اسکرول در تابع smoothScroll در متغیر speed قابل دستکاری است که بهتر است حالت پیش فرض را تغییر ندهیم.

اسکرول به بالای صفحه با توابع جی کئوری (jQuery)


روش دیگر اسکرول به بالای صفحات وب استفاده از توابع کتابخانه جاوا اسکریپتی جی کئوری (jQuery) است، این کتابخانه مجموعه ای از توابع از پیش تعریف شده با هدف تسهیل در ایجاد قابلیت های مبتنی بر جاوا اسکریپت در صفحات وب است که بر همین اساس در مورد ساخت دکمه رفتن به بالای صفحه نیز کاربرد دارد، برای دریافت جی کئوری می توانیم نسخه کم حجم و فشرده شده این کتابخانه را از لینک زیر یا سایت مرجع آن دانلود و در سورس صفحات مورد نظر درج کنیم.
دانلود کتابخانه جاوا اسکریپتی جی کئوری (jQuery) - نسخه 3.3.1 فشرده شده 
(حجم فایل ZIP شده: 30 کیلوبایت، به روزرسانی فایل دانلود: 1397/4/10)
https://jquery.com/download
جی کئوری قابلیت های متنوعی برای ایجاد جلوه های افکت و سفارشی سازی عناصر صفحات وب دارد، برای استفاده از این کتابخانه ابتدا در قسمت هدر سایت خود (بین تگ head) فایل کتابخانه را ایمپورت می کنیم (در حال حاضر می توانیم از سرویس هایی مانند گوگل نیز استفاده کنیم).
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
یا
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
کد زیر را نیز بعد از آن کپی می کنیم، این کد شامل توابعی است که وظیفه ایجاد اسکرول نرم و به اصطلاح هوشمند سازی دکمه رفتن به بالای صفحه را بر عهده دارد.
<script type="text/javascript">
$(document).ready(function(){
    $("#back-top").hide();
    
    $(function(){
        $(window).scroll(function(){
            if($(this).scrollTop() > 500){
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        $('#back-top a').click(function(){
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            
            return false;
        });
    });
});
</script>
سپس استایل CSS زیر را در صفحه وب خود ایمپورت کرده یا بین تگ style درج می کنیم، امکان سفارشی سازی تمام موارد در فایل CSS وجود دارد اما بهتر است پس از تسلط کامل بر جزئیات این روش، تغییرات دلخواه را اعمال کنیم.
<style type="text/css">
.block{
    display: block;
    height: 1500px;
    width: 80%;
    color: #FFFFFF;
    background-color: #119F9D;
    border:1px solid #006738;
    clear: both;
    padding: 4px;
    margin-left: auto;
    margin-right: auto;
}
#back-top {
    position: fixed;
    bottom: 50px;
    margin-left: -150px;
}
#back-top a {
    width: 108px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #bbb;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover {
    color: #000;
}
#back-top span {
    width: 108px;
    height: 108px;
    display: block;
    margin-bottom: 8px;
    background: #ddd url(up-arrow.png) no-repeat center center;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover span {
    background-color: #777;
}
</style>
حال در بالاترین قسمت صفحه بعد از تگ body بلاکی با آی دی فرضی block می سازیم، به طور مثال:
<div id="block" class="block">برای تست کد، به پائین صفحه اسکرول کنید!</div>
اکنون در پائین ترین قسمت صفحه قبل از تگ body کد زیر را جهت نمایش دکمه قرار می دهیم.
<div style="display: block;" id="back-top">
<a href="#block"><span></span>&uarr; رفتن به بالای صفحه</a>
</div>
می توانیم پیش نمایش کار را در مثال زیر مشاهده کنیم.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | رفتن به بالای صفحه با توابع جی کئوری</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
a{
    text-decoration:none;
}
.block{
    display: block;
    height: 1500px;
    width: 80%;
    color: #FFFFFF;
    background-color: #119F9D;
    border:1px solid #006738;
    clear: both;
    padding: 4px;
    margin-left: auto;
    margin-right: auto;
}
#back-top {
    position: fixed;
    bottom: 50px;
    margin-left: -150px;
}
#back-top a {
    width: 108px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #bbb;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover {
    color: #000;
}
#back-top span {
    width: 108px;
    height: 108px;
    display: block;
    margin-bottom: 8px;
    background: #ddd url(up-arrow.png) no-repeat center center;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover span {
    background-color: #777;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#back-top").hide();
    
    $(function(){
        $(window).scroll(function(){
            if($(this).scrollTop() > 500){
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        $('#back-top a').click(function(){
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            
            return false;
        });
    });
});
</script>
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است!</noscript>
<div id="block" class="block">برای تست کد، به پائین صفحه اسکرول کنید!</div>
<div style="display: block;" id="back-top">
<a href="#block"><span></span>&uarr; رفتن به بالای صفحه</a>
</div>
<hr>
در این روش در قسمت دستورات جی کئوری با استفاده از متد scrollTop مقدار اسکرول کاربر را محاسبه کرده و اگر از میزان تعیین شده بیشتر بود بلاک رفتن به بالا را با افکت محو و آشکارسازی (Fade) نرم نمایش می دهیم.
</body>
</html>
پیش نمایش
(نکته: در این مثال از فایلی که در سرور سایت گوگل قرار دارد استفاده کرده ایم).
sectionدسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت
» نمایش پیام صفحه در حال بارگذاری با جاوا اسکریپت
» استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP
» ساخت افکت رنگی با جاوا اسکریپت (JavaScript)
» ایجاد پنل جمع شونده با جاوا اسکریپت و فریم ورک Spry
commentنظرات (۲۷ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: جواد
۱۵:۰۴ ۱۳۹۱/۰۷/۰۷
ایول داداش... با حال بود... دمت گرم...
نویسنده: S
۱۹:۲۹ ۱۳۹۱/۱۲/۲۱
تشکر از زحماتتون
نویسنده: امیررضا
۰۴:۰۹ ۱۳۹۲/۰۳/۲۰
سلام ممنون خیلی آموزش عالی بود
نویسنده: سید محمد
۱۱:۱۵ ۱۳۹۲/۰۵/۰۱
سلام یه سوالی داشتم ، ببین من عرض سایتم را گرفتم 5000 پیکسل ، طوری که پائین سایت اسکرول پیدا می کنه و مثل اسکرول بار کنار باید بلعکس از مثلا سمت چپ بره به طرف راست بجای اینکه از پائین بره بالا ، بگو خب ، حالا من همین کد رو می خوام استفاده کنم منتهی از جی کئوری که مثلا وقتی روی این دکمه کلیک می کنم بره به عرض مثلا 3000 پیکسل بعد اونجا یه دکمه دیگه باشه که وقتی روش کلیک می کنی بره رو عرض 5000 پیکسل ، می خواستم بدونم چه جوری میشه یه نقطه خاصی را مشخص کرد ؟ با تشکر
پاسخ: 
انجام این کار با کد حاضر ممکن نیست، از طرفی این حالت استاندارد نیست (داشتن اسکرول افقی در صفحه) لذا راه حل آماده ای برای آن وجود ندارد (مگر اینکه با جی کئوری آشنا باشید، وقت بگذارید و دستورات را متناسب با نیاز خود تعریف کنید)، به نظر باید به دنبال کدهای اسلایدر افقی باشید نه اینکه در صفحه اسکرول افقی ایجاد کنید.
نویسنده: سایت تاپ ناب
۰۰:۱۶ ۱۳۹۲/۰۵/۱۴
با تشکر از این آموزش ممنون
نویسنده: تلخ
۱۷:۱۸ ۱۳۹۲/۰۶/۲۲
سلام سايتتون چيزی در حدود يک روياست ...
نویسنده: erfan
۱۸:۰۷ ۱۳۹۲/۰۶/۲۹
اصلا نفهمیدم چی شد اگه میتونی یه دونه به شکله عکس کریس رونالدو به ایمیلم بفرست
پاسخ: 
آموزش به اندازه کافی گویا است، متاسفانه امکان ارسال به ایمیل وجود ندارد.
نویسنده: یو پی اس
۲۳:۳۹ ۱۳۹۲/۱۰/۰۴
با سلام
ممنون عالی بود
نویسنده: علی
۱۷:۲۴ ۱۳۹۲/۱۱/۲۹
بسیار خوب و مفید بود ممنون
نویسنده: امیر حسین
۱۲:۳۷ ۱۳۹۳/۰۲/۱۹
سلام ببخشید نمیشه تصویرش رو عوض کنم
پاسخ: 
سلام
اگر با CSS آشنا باشید، می توانید به جای تصویر زیر، تصویر مورد نظر خودتان را جایگزین کنید.
 background: #ddd url(up-arrow.png) no-repeat center center;
نویسنده: میثم
۱۵:۲۳ ۱۳۹۳/۰۳/۳۰
سلام خسته نباشید
اگر امکانش هست مطلبی هم در مورد fancy-box قرار بدید.
همچنین در رابطه با اون کادر هایی که گزینه های چپ و راست دارن و میشه تصویر رو در بین کادر انتخاب کرد. (با زدن دکمه چپ ، ردیف یک واحد به سمت چپ طی میکنه و با زدن دکمه راست ، ردیف یک واحد به سمت راست طی میکنه.)
مرسی.
پاسخ: 
در کوتاه مدت مقدور نیست، اما در مطالب آینده مد نظر خواهند بود!
نویسنده: reza
۱۲:۵۵ ۱۳۹۳/۰۵/۰۴
با سلام
میخواستم بپرسم که چطوری میشه position یک div رو بر اساس فاصله اش از پایین صفحه تغییر داد زمانی که صفحه اسکرول میخوره به پایین؟
تغییر position بر اساس میزان اسکرول خوردن از بالا رو میدونم که به شکل زیر هست ولی میزان اسکرول باقی مانده از پایین صفحه رو چطور باید کدنویسی کرد؟
ممنون میشم که راهنماییتون رو به ایمیلم ارسال کنید
پاسخ: 
متد scrollTop در جی کئوری موقعیت یک عنصر از لحاظ عمودی یا vertical را مشخص می کند، لذا محاسبه از پائین یا بالا تفاوتی ندارد و این ارتفاع صفحه نمایش است که موثر است و نشان می دهد که چه میزان به انتهای صفحه باقی مانده.
نویسنده: آل موبایل
۱۵:۳۴ ۱۳۹۳/۰۶/۲۸
سلام خیلی ممنون استفاده کردم.
نویسنده: soran
۱۲:۵۲ ۱۳۹۳/۰۷/۱۷
ايول داداش
دمت گرم
من توي سايت هاي انگليسي خيلي گشتم نتونستم چيزي گير بيايم يا شايد چون زبانم خوب نيست نتونستم درست سرچ كنم و اينجا راحت مطلبي كه ميخواستم گيرم اومد
خدا خيرت بده
نویسنده: ataee
۰۰:۵۱ ۱۳۹۳/۰۷/۱۸
خیلی عالی بود، ممنون
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





4 × 4
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form بنیامین
در:
درود. وقت بخیر. من یک سوالی از خدمتتون داشتم؟ من می خوام وقتی کاربر بنویسه بدون اینکه URL تغییر کنه. و اینکه چطوری بعد...
۱۳۹۹/۱۱/۰۷

form مهدی
در:
خیلی ممنون آموزش خیلی خوبی بود
۱۳۹۹/۱۱/۰۷

form علی
در:
سلام تشکر میکنم از شما و سایت فوق العاده عالی تون مشکلم حل شد تشکر میکنم موفق باشید
۱۳۹۹/۱۱/۰۵

form rofa
در:
سلام خسته نباشید خیلی ممنونم از مطالب خوبتون.. ببخشید علامتی که در سمت راست همین سایت هستش چجوری تغییر جهت میده با اسکرول کردن...
۱۳۹۹/۱۱/۰۵

form علی
در:
با سلام تشکر از سایت خوبتون و اموزشای خوبی که قرار میدین یک سوال داشتم من میخوام از یک فایل رشته ای همانند :...
۱۳۹۹/۱۱/۰۵

form علی
در:
با سلام سایت هایی من میخوام اطلاعاتی از سایتی بگیرم اما این سایت پس از چند ثانیه این اطلاعات رو به من نشون میده و...
۱۳۹۹/۱۱/۰۴

form شیدا
در:
سلام برای اینکه بتونم جدول ضرب 1 در 5 رو بنویسم چه کدهایی باید بنویسم؟
۱۳۹۹/۱۱/۰۳

form امیرحسین
در:
چرا استاد خیلی فرق داره الان کد زیر را شما در نظر بگیرید بین 0 تا 1 ثانیه طول میکشه اجرا شدنش خب شما...
۱۳۹۹/۱۱/۰۲

form امیرحسین
در:
سلام استاد حالتون چطوره، من یه سوال داشتم: تو پروژه های بزرگ که یک ارایه معمولا 20 عنصری یا نهایت 100 عنصری داشته باشیم...
۱۳۹۹/۱۱/۰۲

form کوثر رحیمی
در:
سلام ا ز راهنماییتون ممنونم من تازه وبلاگم رو درست کردم ۱۲ سالمه هر کاری می کنم فیلم در اون قرار نمیگیره همش این خطا...
۱۳۹۹/۱۰/۲۹

form متین
در:
سلام و خسته نباشید من بخوام داده ای که از قبل موجوده رو با متد پست به یک فایل ارسال کنم چجور میشه؟ یعنی...
۱۳۹۹/۱۰/۲۷

form روشنا
در:
سلام ما یه وبلاگ گروهی داریم مختص املاک فایل های جدید و حتی قالب جدید اصلا اعمال نمیشه . حتی راهنمایی که کرده...
۱۳۹۹/۱۰/۲۷

form علی
در:
من در یک سایت سازی سایت ساختم یه بخش داره به نام اسکریپت دلخواه می خوام یه اسکریپتی بذارم که مثلا یه موسیقی وقتی کاربر...
۱۳۹۹/۱۰/۲۷

form امیرحسین
در:
بله استاد خیلی ممنون، نمیدونستم خودش Optimize رو انجام میده در کل من بعد از ایندکس گذاری ها همیشه سعی کردم جوری که با...
۱۳۹۹/۱۰/۲۶

form امیرحسین
در:
ُسلام وقت بخیر این کووری هم چون اول قسمت WHERE انجام میشه بعد قسمت ON پس این کووری هم با حالت کووری قبلی برابره
۱۳۹۹/۱۰/۲۶
form امیرحسین
در:
سلام استاد وقت بخیر ممنون از پاسخ گویی های قبلی یه سوال دیگه داشتم: این هم هیچ مشکلی نداره و کار میکنه، ایا...
۱۳۹۹/۱۰/۲۵
form محمد بیدل بازه
در:
سلام خسته نباشید ببخشید من توی یک قسمت سایتم تصویری دارم و میخوام سمت راست اون تصویر متن بنویسم ولی نمیشه تا متن رو...
۱۳۹۹/۱۰/۲۵
form سلام
در:
و اینکه یه تگ خوب برای فونت معرفی کنید و یه تگ دیگه که متن رو (تیتر مطلب (تست)) در ادامش بنویسه نه اینکه...
۱۳۹۹/۱۰/۲۴
form سلام
در:
سلام وبسایتم را نگاه کنید از چه تگی استفاده کنم تا فاصله بین تیتر مطلب جدید را کاهش دهم؟ (از خطی به خط...
۱۳۹۹/۱۰/۲۴
form وطن
در:
سلام. خسته نباشید. خیلی گشتم درباره یک خطا یا ایراد فنی که چند روز هست در سایت نوشته شده با پی اچ پی (اسکریپت اولوشن)...
۱۳۹۹/۱۰/۲۴
form حورارمی
در:
سلام. من هنوز نمیدونم تو تنظیمات باید کجا رو بگردم تا قالب وبلاگم رو با عکس مورد علاقه ام تغییر بدم. یا نمیتونم...
۱۳۹۹/۱۰/۲۳
form راشد
در:
این روش خیلی طولانیه در فروشگاه من یک برنامه گرفتم که یه عکس توش اپلود کن بهت یک لینک میده در ظرف چند ثانیه و...
۱۳۹۹/۱۰/۲۱
form باسلام
در:
باسلام خدمت شما عزیز زحمت کش، من مطلب را تا آخر مطالعه کردم. من وبلاگم بازدیدای زیادی داره چون تمام مطالبش رو خودم مینویسم و...
۱۳۹۹/۱۰/۲۱
form محمود
در:
سلام و عرض ادب من در سایتم یک قسمت تب ایجاد کردم، متن ها را که در تب می نویسم پاراگراف بندی نمی شوند....
۱۳۹۹/۱۰/۲۱
form علی آقابیگی
در:
سلام خسته نباشید ببخشید من می خواستم کد جدید در وبلاگم بزارم بعد اشتباهی رفتم در قسمت ویرایش کدها و بعد بیشتر کدها را پاک...
۱۳۹۹/۱۰/۲۰
form محمد
در:
سلام. من میخوام با جاوا اسکریپت یک کدی بنویسم که وقتی کاربر روی یک دکمه ‏ای کلیک کرد، یک کد تصادفی برای شمارش ارسال...
۱۳۹۹/۱۰/۲۰
form پوریا
در:
سلام خسته نباشید، ممنونم بابت توضیحات خوبتون، یه مشکلی داشتم میخواستم ببینم امکانش هست راهنمایی کنید؟ فرض کنید یه اینطور متنی داریم: ...
۱۳۹۹/۱۰/۱۹
form seyedsobhanmansouri
در:
سلام خسته نباشید من سایتمو طراحی کردم اما به این مشکلات بر میخورم اول اینکه هدر سایتم نمایش داده نمیشه اصلا و بعد...
۱۳۹۹/۱۰/۱۹
form رضا
در:
سلام. ممنون بابت مطالب مفیدتون. این نوع جستجو به سئو سایت لطمه نمیزنه؟؟؟ چون در این مدل جستجو، مقدار impression میره بالا ولی...
۱۳۹۹/۱۰/۱۹
form mahdi
در:
سلام استاد عزیز ، پس بنظرتون بجای وقت گذاشتن برای یادگیری لاراول و وردپرس ، وقت بزارم که عمیق تر php و ساختار mvc...
۱۳۹۹/۱۰/۱۹
form علی
در:
سلام و ممنون بابت وبسایت عالیتون داخل بعضی سایت ها دیدید مثلا یه متنی شروع به تایپ شدن می کنه و وقتی کامل شد...
۱۳۹۹/۱۰/۱۸
form محمد
در:
سلام خدمت شما دوست عزیز سوالم این بود میخاستم چندتا مثال از این تابع و چند تابع دیگه از خودتون رو برام مثال بزنید...
۱۳۹۹/۱۰/۱۸
form محمود رنجبر
در:
سلام برادر مشکل من تو همین سایتی هست که فرستادم وقتی گزینه خانه رو کلیک میکنم و بعد دکمه بک گوشی رو میزنم بالای صفحه...
۱۳۹۹/۱۰/۱۷
form mahdi
در:
سلام استاد عزیز ، بعد از آموزس php با لاراول کار کنیم بهتره ؟
۱۳۹۹/۱۰/۱۶
form رضا
در:
آدرس رو براتون گذاشتم دامنه قبلا روی یه وبلاگ میهن بلاگ بود چند ماه میشه که از میهن بلاگ خداحافظی کردم ولی هنوز که هنوزه...
۱۳۹۹/۱۰/۱۴
form نیلو
در:
سلام... ببخشید بعد طراحی قالب قالب شیشه ایم هست یا نه؟؟؟
۱۳۹۹/۱۰/۱۳
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.