سبد خرید (0)

تبلیغات

آموزش ساخت دکمه برگشت به بالا


ساخت دکمه برگشت به بالا همانند آسانسور 

elevator.js یکی از پلاگین های جی کوئری است، ایده ی به کار رفته در این ابزار، همانند آسانسور است.

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

توجه: elevator.js مستقل از کتابخانه های دیگر است.


DEMO یا پیش نمایش پلاگین   elevator.Js

برای مشاهده نتیجه کار، روی لینک زیر کلیک نمایید:


نحوه استفاده

برای شروع به کار ابتدا یک سند HTML ایجاد کرده و پلاگین elevator.min.js را در آن فراخوانی کنید.

توجه:   فایل های مربوط به پلاگین elevator.js، را می توانید از انتهای همین مطلب دانلود نمایید.

مثال (آموزش ساخت دکمه برگشت به بالا)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> elevator.js</title>
<style type="text/css">
 
</style>
</head>
<body>
 
<script type="text/javascript"src="elevator.min.js"></script>
<script type="text/javascript"></script>
 
</body>
</html>

 محتوای صفحه را باید به گونه ای قرار داد تا امکان اسکرول عمودی در صفحه ایجاد شود.

برای برگشت به ابتدای صفحه می بایست دکمه ای را در انتهای صفحه تعبیه کرد:

ایجاد دکمه

<button class="elevator-button">برگشت به بالا</button>

تنظیم کد های CSS:

کد  CSS

}body

;background-color:##ccc

;text-align:center

}
 
p {
width:80%;
margin:auto;
padding:60px;
}
 
button {
color:#fff;
background:#660066;
padding:20px;
border-radius:5px;
cursor:pointer;
border:2px solid #000;
outline:none;
font-size:16px;
text-align:center;
display:block;
margin:auto;
}

تنظیم آهنگ و سرعت حرکت:

این اسکریپت را در انتهای فایل قرار دهید.

مثال (آموزش ساخت دکمه برگشت به بالا)

window.onload=function(){
  varelevator=newElevator({
    element:document.querySelector('.elevator-button'),
    mainAudio:'music/romantic.mp3',
    endAudio:'music/ding.mp3',
    duration:30000
  });
}
خودتان امتحان کنید »

 مهمترین ویژگی های این ابزار عبارتند از:

  • element : آدرس دکمه برگشت به بالا .
  • mainAudio : آدرس آهنگ اصلی (آهنگی که در هنگام حرکت به بالا پخش می شود.)
  • endAudio : آدرس آهنگی که در انتهای حرکت (هنگام رسیدن به ابتدای صفحه) پخش می شود.
  • duration : مدت زمانی است که اسکرول کردن به سمت بالا طول می کشذ. (بر حسب میلی ثانیه)

توجه: در صورتی که تنها دو ویژگی element  و duration مقدار دهی شوند، همان برگشت به بالای ساده انجام می شود.

سایت BenSound آهنگ های متنوعی ارائه کرده است که می توان از آنها برای مقدار دهی به پارامتر های endAudio ,mainAudio  استفاده کرد.


دانلود فایل های پلاگین elevator.js

حجم: 700.63 کیلو بایت

 

دیدگاه‌ها  

+3 # amin 1394-08-17 15:39
سلام
ایا می شود دکمه را طوری تنظیم کنیم که با کلیک بر روی ان به جای خاصی از صفحه برود نه فقط به بالا ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-08-17 15:52
سلام.
بله! امکانش هست. برای اون قسمت خاص از صفحه یک ID تعریف کنید. سپس در همان صفحه در آخر آدرس به انتهای آدری id_element# رو اضافه کنید. با تأیید آدرس، به همونجایی خواهید رفت که اون ID براش تعریف شده باشه.

در این حالت آدرس بار باید چیزی شبیه http://yourwebsite.com/link.php?page=3#id_element باشه.
id_element در واقع ID تعریف شده برای اون تگ خاصی هست که شما مشخص میکنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # amirkian 1394-05-24 16:43
میشه نحوه ساخت دکمه برگشت به بالا را بدون پلاگین توضیح دهید.
من یک لینک گذاشتم برای برگشت به بالا و از لینک های لنگری استفاده کردم
ولی وقتی روی لینک کلیک میکنم به سرعت به بالا میره؛من میخام این حرکت به صورت نرم باشد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # شهربانو دوستی 1394-05-28 14:32
با سلام
استفاده از لینک برای ایجاد دکمه برگشت به بالا یه برگشت ساده را ایجاد می کند، و موارد پیشرفته تری را در اختیار قرار نمی دهد. همان طور که در مطلب ذکر شد. با خاصیت duration می توانیم سرعت دلخواهمان را تنطیم کنیم. شمابرای این کار نیاز دارید تا از جی کوئری استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی