سه شنبه ۲۸ دی ۱۴۰۰

Tuesday, January 18, 2022 GMT +3:30

ساخت دکمه رفتن به بالای صفحه (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>
پیش نمایش
(نکته: در این مثال از فایلی که در سرور سایت گوگل قرار دارد استفاده کرده ایم).
دسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
نمایش کادر پیام شناور در سایت و وبلاگ با جاوا اسکریپت
ایجاد پنل جمع شونده با جاوا اسکریپت و فریم ورک Spry
نمایش پیام در حال بارگذاری با جاوا اسکریپت (JavaScript)
ساخت پنل چند سربرگی (Tabbed Panel) با جاوا اسکریپت و CSS
استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP
دیدگاه
more ۲۹ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
نویسنده: alireza
۱۶:۰۰ ۱۳۹۳/۰۸/۳۰
عالی هست
۰۹:۳۲ ۱۳۹۳/۱۰/۲۸
دمت گرم داداش
کدی جی کوری عالی بود
نویسنده: 2015
۰۴:۱۸ ۱۳۹۴/۰۱/۱۰
سلام و خسته نباشید
ببخشید من یه مشکلی دارم
میخوام در سایتم وقتی رو دسته ها کلیک شد بره یکم صفحه نمایش اسکرول بشه به سمت پایین و یعنی محصولات رو نشون بده و وقتی رو دسته ها کلیک شد اسکرول شه به سمت بالا.
ممنون میشم راهتمایی کنید تا بتونم تحربه کسب کنم
با تشکر
پاسخ: 
می توانید با استفاده از jQuery پس از کلیک بر روی لینک یا دکمه به ID یک بلاک اسکرول کنید، مثال:
http://jsfiddle.net/kevinPHPkevin/8tLdq/1
نویسنده: مصطفی
۱۸:۱۵ ۱۳۹۴/۰۴/۱۷
لایک داری
۲۰:۱۵ ۱۳۹۴/۰۴/۲۰
چگونه اسکرول بار همراه با کادر درست کردی ؟
پاسخ: 
اگر با HTML و CSS آشنا باشید، با بررسی سورس کد سایت، می توانید از روش ما الگوبرداری کنید.
نویسنده: محمد
۱۱:۰۳ ۱۳۹۴/۰۸/۰۱
دستتون درد نکنه خیلی خیلی مفید بود.
اگه میشه یه توضیحی بدین که چطور این دستورات جیکوئری و جاوا اسکریپت رو توسط یک لینک به کد HTML اضافه کنیم چون یکم دچار سردرگمی شدم.
پاسخ: 
لطفا آموزش را به دقت مطالعه کنید، توضیح داده شده! همچنین می توانید سورس کد پیش نمایش ها را نیز مشاهده کنید.
نویسنده: khalogh
۱۷:۱۳ ۱۳۹۴/۱۲/۱۴
خلاصه و مفید
نویسنده: ايراني
۱۹:۲۴ ۱۳۹۵/۱۱/۲۰
سلام
شما بدون هيچ چشم داشتي و به صورت كاملا ساده و كامل مطالب رو بيان مي كنيد و به دل مخاطب ميشينه! اين واقعا عاليه، عالي!
ممنونم. واقعا خسته نباشيد.
۲۳:۰۰ ۱۳۹۸/۱۲/۲۲
با سلام
ببخشید میشه همین دکمه برگشت به بالای صفحه رو به زبان HTML 5 کدنویسی کرد؟
پاسخ: 
در کل روش جداگانه ای برای اسکرول به بالای صفحه در HTML5 وجود ندارد، باید یکی از روش های توضیح داده شده در آموزش را با توجه به نیاز صفحه وب انتخاب یا با کدنویسی پیشرفته سفارشی سازی کنید.
نویسنده: امیر
۲۱:۳۸ ۱۳۹۹/۰۱/۱۲
سلام. خیلی خیلی ممنونم از شما
سایتتون خیلی عالی هستش و ممنونم ازتون دقیقا همونی بود که می خواستم عالی... من سایتتونو توی منوی کرومم گذاشتم.
نویسنده: علیرضا
۰۱:۴۲ ۱۳۹۹/۰۵/۰۹
سلام خیلی ممنون بابت مطالب مفیدتون عاالی بودن ان شالله همیشه موفق باشین.
نویسنده: shayan
۲۳:۵۳ ۱۳۹۹/۰۵/۱۷
با سلام وقت به خیر
من میخوام تو یه زبانه ای که در واقع متن قرار دادم لینک اسکرول بالا در حده پیکسل دلخواه ایجاد کنم. میشه کمکم کنید برای کدش.
با سپاس
پاسخ: 
با کمی آشنایی با جاوا اسکریپت می توانیم همین روش را به میزان پیکسل دلخواه بر روی بلاک مورد نظر اعمال کنیم، به فرض:
https://www.w3schools.com/jsref/met_win_scrollby.asp
در نمونه کدهای این صفحه از آبجکت window استفاده شده که تگ body را هدف قرار می دهد اما بر حسب نیاز به جای window می توانیم با متد document.getElementById بلاک هدف را با آی دی آن انتخاب کنیم:
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
به این صورت میزان اسکرول به جای کل صفحه به تگ مورد نظرمان اعمال می شود، برای راهنمایی بیشتر لطفا کدها را در یک صفحه درج و با ذکر توضیحات تکمیلی آدرس صفحه را قرار دهید یا فایل را به ایمیل ما (موجود در بخش تماس) ارسال نمائید تا بررسی کنیم.
نویسنده: محمد براتی
۱۶:۵۷ ۱۴۰۰/۰۵/۲۲
خوب بود ممنون
نویسنده: حسین
۱۷:۳۹ ۱۴۰۰/۱۰/۲۲
سلام
ببخشید یک سوال داشتم
چجوری میشه با زدن یک دکمه کمی بالاتر یا پایین تر برود یا با زدن نوشته ای روی عکس یا متنی برود
خیلی ممنون
پاسخ: 
برای اسکرول به میزان پیکسل دلخواه می توانیم از متد scrollBy استفاده کنیم، مثال:
https://www.w3schools.com/jsref/met_win_scrollby.asp
برای ایجاد حالت اسکرول نرم می توانیم از جی کئوری استفاده کنیم:
https://www.learningjquery.com/2013/05/jquery-scroll-page-automatically-by-few-pixels-after-every-few-seconds
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده می شود.
- کدها و اسکریپت های طولانی را در یک صفحه وب آنلاین قرار دهید تا امکان بررسی دقیق و خطایابی میسر باشد.
- ممکن است پاسخ سوالتان نیاز به کدنویسی داشته باشد، در این موارد مدت زمان بیشتری برای پاسخگویی مورد نیاز است.
- تمام دیدگاه ها خوانده شده و زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا تا هنگام انتشار دیدگاه شکیبا باشید.



 refresh
10 × 10
8 × 8
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
Bahar
در:
سلام ،کدام لیست ترتیب قرارگیری انها اهمیت نداره؟ ازبین اینها؟
۱۴۰۰/۱۰/۲۷

حدیثه یدی
در:
سلام خسته نباشید ، خیلی وبلاگ خوبی دارید، مطالبتون واقعا مفید بود .. من یک سوالی داشتم می‌خوام برای وبلاگم فونت های مختلف پیدا کنم...
۱۴۰۰/۱۰/۲۶

Fatemeh
در:
سلام چه طوری داخل این کادرهای که ایجاد میشه با این کد متن txt1, txt2 ,... نوشته شود؟
۱۴۰۰/۱۰/۲۵

Fatemeh
در:
سلام وقت بخیر چطوری میتونم موارد زیر رو انجام بدم؟! میشه کمک کنید ممنون! پوسته تارنمای فروشگاه آنالین لوازم خانگی را به صورت زیر...
۱۴۰۰/۱۰/۲۵

سپیده
در:
سلام مجدد لینک صفحه خدمت شما ممنون میشم راهنمایی کنید کدی که توی پیام قبلی ارسال کردین رو کجا باید بگذارم؟
۱۴۰۰/۱۰/۲۳

سپیده
در:
سلام و درود سایتم وردپرس هست و با المنتور طراحی کردم توی صفحه ویرایش حساب کاربران، میخوام فیلد تغییر آدرس ایمیل رو حذف کنم....
۱۴۰۰/۱۰/۲۲

حسین
در:
سلام ببخشید یک سوال داشتم چجوری میشه با زدن یک دکمه کمی بالاتر یا پایین تر برود یا با زدن نوشته ای...
۱۴۰۰/۱۰/۲۲

سپهر
در:
سلام استاد ضمن تشکر از آموزش خوب شما عرض شود بنده دارم یک ربات چت ساده می‌سازم که در بانک اطلاعات خود دو ستون...
۱۴۰۰/۱۰/۲۱

Fatemeh
در:
سلام روز بخیر این کد مشکلش چیه؟!
۱۴۰۰/۱۰/۱۹

پـــرتو
در:
سلام خسته نباشید ببخشید مزاحم میشم من قالبی ک بهتون دادم یادتون میاد؟کدش رو دارین؟میشه براش لطفا اگه میشه عنوان بزارین؟چون عنوان نداره ممنون...
۱۴۰۰/۱۰/۱۷

مهلا
در:
من یه تکه کدی نوشتم با زبان php که 9 عکس دادم با سه سطر و ستون می‌خوام در خروجی این عکسها بطور تصادفی...
۱۴۰۰/۱۰/۱۵

امیرحسین
در:
سلام وقت بخیر بنده یه سوال خیلی مهمی داشتم که اگر کمک کنید و راهکاری به من بدید سوالم اینه که من دارم یه ربات...
۱۴۰۰/۱۰/۱۴

وحید
در:
سلام خسته نباشید و ممنون از شما من میخواستم بدونم چطوری میشود فیلم های طولانی در وبلاگ بگذاریم ممنون
۱۴۰۰/۱۰/۱۴

Fatemeh
در:
وقت بخیر متاسفانه من هر کدی مینویسم یه اشکالی داره این کد مشکلش چیه؟🤦🏻‍♀️
۱۴۰۰/۱۰/۱۲

نازنین
در:
اسکریپتی بنویسید که نام و نام خانوادگی و سال تولد شخص را دریافت کرده، علاوه بر نمایش نام و‌ نام خانوادگی در مرورگر، سن فرد...
۱۴۰۰/۱۰/۱۲

عباس صلاحی
در:
با سلام خدمت شما و تشکر از سایت خوبتون بنده یک table درام که سه ستون در کنار هم داره می خوام که وقتی...
۱۴۰۰/۱۰/۱۲

Fatemeh
در:
سلام وقت بخیر خسته نباشید این تیکه کد با دستور if چه مشکلی داره!؟
۱۴۰۰/۱۰/۱۲

بابایی
در:
سلام وقت بخیر این آدرس یکی از مقالاتی هست که داخل سایت گذاشتم میخوام یه تغییری بدم که این اعداد وسط لینک آدرس نباشه...
۱۴۰۰/۱۰/۱۲

elahe
در:
سلام وقتتون بخیر من در جدول پایگاه داده کتابخانه 4 تا ستون دارم که میخوام هر فیلد رو در یک لیبل بریزم در واقعه یک...
۱۴۰۰/۱۰/۱۲

m.b
در:
سلام مجدد تشکر بابت راهنمایی من یک مشکل دیگه برام بوجود آمد و اون اینکه بعد از ارسال اطلاعت به صفحه questions.php بر...
۱۴۰۰/۱۰/۱۱

m.b
در:
سلام من یک فرم طراحی کردم جهت ارسال سوال با صفحه questions.php با متد post به صفحه dbquestions.php ارسال میشود. این نمونه کد های...
۱۴۰۰/۱۰/۱۱

m.b
در:
با سلام ضمن تشکر از وب سایت خوبتان من مطابق کدهای شما عمل کردم و تمامی کدها رو کپی کردم و...
۱۴۰۰/۱۰/۱۱

fateme
در:
سلام ممنون از سایت خوبتون من سوالم اینه که چجوری داخل منو که با li هست لینک بزاریم تگه لطف کنید بگید ممنون میشم
۱۴۰۰/۱۰/۱۱

مهلا
در:
میخام با php دو تا عدد بنویسم که اگه عدد اول بزرگتر بود 5 بار چاپ کنه که عدد اول بزرگتراست. ممنون میشم جواب بدید...
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
ممنون از پاسخگویی مشکل این یکی کد چیه ؟
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
سلام وقت بخیر مشکل این کد چیه اجرا نمیشه؟
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
سلام وقت بخیر چطوری میتونم یه کد با prompt.window بنویسم که هنگام باز شدن صفحه وب یک عدد از کاربر بگیره و رقم...
۱۴۰۰/۱۰/۱۰

zahra
در:
سلام وقتتون بخیر باشه من میخام از 1 تا 30 روز و برام چاپ کنه یعنی اگر ماه 31 روز بود 1 تا 31 را...
۱۴۰۰/۱۰/۰۸

پوریا
در:
سلام url سایت که گفتم بعد از نصب پلاگین دچار مشکل شد:
۱۴۰۰/۱۰/۰۵

پوریا
در:
سلام وقتتون بخیر اساتید محترم من پلاگین مرغ مگسخوار hummingbird رو روی سایتم نصب کردم (قالب استودیار) و دیدم که پولی شده و هیچیش...
۱۴۰۰/۱۰/۰۴

کیوان عباسپور
در:
سلام ممنون از سایت خوبتان متاسفانه ایمیل های ارسالی اسپم شناسایی میشن واسه رفع این مشکل چیکار کنم منظورم اینه که ایمیل ها...
۱۴۰۰/۱۰/۰۱
  در انتظار بررسی: ۴
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.