چهارشنبه ۲۷ شهریور ۱۳۹۸
0937-1464-764

دکمه بازگشت به بالا در سایت

Payam Hayati

شنبه ۲۳ شهریور ۱۳۹۸

55

دکمه بازگشت به بالا در سایت

آموزش قرار دادن دکمه بازگشت به بالا در صفحه وب، Scroll to top button

با استفاده از کدهای زیر می توانید دکمه بازگشت به بالا را در سایت خود ایجاد کنید. کدهای بخش HTML:

<div class="container"> <div class="row justify-content-center text-center"> <div class="col-8 my-5"> <p class="h5">Hello!</p> <img src="http://via.placeholder.com/900x300" class="img-fluid rounded mb-3" alt=""> <img src="http://via.placeholder.com/900x300" class="img-fluid rounded mb-3" alt=""> <img src="http://via.placeholder.com/900x300" class="img-fluid rounded mb-3" alt=""> <img src="http://via.placeholder.com/900x300" class="img-fluid rounded alt=""> </div> </div> </div> <a id="back-to-top" href="#" class="btn btn-light btn-lg back-to-top" role="button"> <i class="fas fa-chevron-up"></i> </a>
کدهای بخش CSS:
body { background-color: #3498db; color: #ecf0f1; } .back-to-top { position: fixed; bottom: 25px; right: 25px; display: none; }
کدهای بخش جاوا اسکریپت:
$(document).ready(function(){ $(window).scroll(function () { if ($(this).scrollTop() > 50) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); // scroll body to 0px on click $('#back-to-top').click(function () { $('body,html').animate({ scrollTop: 0 }, 400); return false; }); });


شناسه مجموعه عنوان خلاصه مطلب ادامه
38 برنامه نویسی
معرفی کتاب SQL Server 2016
آموزش کاربردی SQL Server 2016 با معرفی شش قابلیت ارزشمند ادامه
39 برنامه نویسی
نکات طلایی SEO
نکات مهم در بهینه سازی سایت برای موتورهای جستجوگر ادامه
40 برنامه نویسی
انتخاب در طراحی وب؟!
از کجا باید شروع کنم؟ چه زبانی را باید انتخاب کنم؟ کدام دوره ها را باید سپری کنم؟ ادامه
41 برنامه نویسی
ایجاد درگاه پرداخت آنلاین
روش های ایجاد درگاه های پرداخت آنلاین در وب سایت ها ادامه
42 برنامه نویسی
چرا هزینه های برنامه نویسی بالاست؟
عوامل زیادی در قیمت گذاری نهایی پروژه های برنامه نویسی نقش دارند که در ادامه به آنها می پردازیم... ادامه
First Page 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Last Page