شرح بالصور اضافة اداة مشاهدة صفحات الفيسبوك لمدونتك - Blogger to facebook

في هذا المقال سنتعلم كيف اضافة زر الانتقال السريع ( ) الي بداية الصفحة باستخدام مكتبة ال ( Jquery ) بلغة الجافا سكريبت

فيما يلي الكواد الخاصه بالزر

---------------------------------------------

نسخ كود ( html ) التالي

<section id="to_up"> <a class="top-item" href="#"><i class="fas fa-arrow-up"></i></a> </section>

نسخ كود ( css ) التالي

#to_up { display: none; } #to_up a{ box-shadow: black 1px 1px 5px; background-color: purple; color: #fff; width: 50px; height: 50px; position: fixed; bottom: 108px; right: 20px; font-size: 2rem; text-align: center; padding: 3px 0; z-index: 999; }

نسخ كود ( javascript ) التالي

$(function(){ $(window).scroll(function(){ if($(this).scrollTop() == 0){ $("#to_up").hide() }else{$("#to_up").show() }}) $("#to_up a").click(function(){ $("html,body").animate( {scrollTop:0},800 ) }) })

ملاحظات علي الكود

• يتم نسخ الكود السابق في ملفات ال (( css - Javascript - html )) الخاصه بالمشروع مع ربط هذه الملفات بالاضافة ربط مكتبة ال (( Jquery )) بملف ال (( Html ))
• في هذه الكود نستخدم ايكونه من مكتبة (( Font Awesome )) لشرح طريقة تنزيلها وربطها بملف المشروع اضغط هنا ( )
• كذلك نستخدم مكتبة ال (( Jquery )) بلغة الجافا سكريبت هذا النك الخاص بشرح تنزيلها وربطها اضغط هنا ( )
• يمكن التعديل في شكل واللوان وموقع الزر عن طريق كود (( Css )) المرفق

*************************************************

وفي النهايه نسئلكم الدعاء وفي انتظار تعليقاتكم