در خدمت شما هستیم با ساخت دکمه اسکرول به ابتدا (Scroll Top)
ساخت دکمه اسکرول به ابتدا (Scroll Top) به کمک html و css و کتابخانه jQuery جاوا انجام می شود
سلام برنامه در این آموزش به شما می آموزد که چطور با یک دکمه به ابتدا صفحه سایت باز گردید
نحوه کار کرد به این صورت است که وقتی سایت را به پایین اسکرول می کنید یک دکمه نمایان می شود
با فشردن این دکمه به ابتدای صفحه باز می گردید
برای ساخت ابتدا کد های زیر را به ابتدای body اضافه کنید
<p id="back-top"> <a href="#top" >top</a> </p>
سپس برای نمایش جلوه ها و استایل کد های زیر را به css اضافه کنید
#back-top {
bottom:30px;
right:10px;
position:fixed;
z-index:100;
}
#back-top a{
display:block;
text-align:center;
text-transform:uppercase;
transition:all 0.3s ease-in-out 0s;
width:50px;
}و در نهایت کد های زیر را به قسمت head اضافه کنید
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, ۸۰۰);
return false;
});
});
});
</script>توجه داشته باشید برای اجرا باید کتابخانه jquery به قسمت head اضافه شود که در سورس آموزش موجود است
همچنین می توانید برای مشاهده جزئیات بیشتر ویدیو آموزش را همراه با سورس کد دریافت کنید
ویدیو آموزش در باکس دانلود زیر همین پست موجود است