طھط£ط«ظٹط± ط§ظ„طµط¹ظˆط¯ ظ„ط£ط¹ظ„ظ‰ Scroll to Top





زر الانتقال الى الأعلى من الازرار الجميلة التي نراها في الكثير من المواقع وتعتبر جيدة للصفحات التي تحتوي على محتوى كبير فهي توفر حلاً مناسبا للوصول الى اعلى الصفحة بعد الانتهاء من قراءة المشاركات الطويلة، مما يجعل موقعك أكثر سهولة
في هذا الدرس مفصل سوف نتعلم طريقة عمل هذا الزر بواسطة Jquery,css


تجربة



في البداية قم بتصمم السهم الذي تريده او قم بالبحث عن سهم من خلال موقع iconfinder


محتوى HTML

رمز Code:
<div id=&quot;back-top&quot;> <a href=&quot;#top&quot;><span></span>للأعلى</a> </div>
تنسيق CSS




رمز Code:
#back-top { bottom: 20px; position: fixed; right: 100px; } #back-top a { width: 65px; display: block; text-align: center; text-decoration: none; color: #333; font: 12px/100% Tahoma, Geneva, sans-serif; /* background color transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover { color: #000; } /* arrow icon (span tag) */ #back-top span { width: 65px; height: 65px; display: block; margin-bottom: 7px; /* rounded corners */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* background color transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; background: #D1D1D1 url(up-arrow.png) no-repeat center center; } #back-top a:hover span { background-color: #777; }
تأثير Jquery