اڷسڷام عع‘ـڷيڪم
ڪيف اڷحـζـآإڷ عساڪم بخير يآإرب ۈماٺششڪۈن بآإس .؟
قررٺ اني انزڷ إضافاٺ ڷـ اڷمدۈناٺ .. طبع‘ـاً دي اڷـآضافاٺ مُش من برمجٺي
ۈإنما مأخۈدة من اڷنٺ ۈحبيٺ اجمع ڷڪم أفضڷ اڷـآضافاٺ ۈإڷي اسٺخدمٺها في مدۈنٺـيـے
عشان ٺقدرۈ ٺسۈۈها في مدۈناٺـڪم , ۈنبدآ مع اڷـآضافـﮧ إڷي حبيٺها مَـره
ۈهيا ( إضافـۃ أيقۈنـﮧ ڷـ اڷذهاب إڷى أعڷى اڷصفحى )
راح اطرح نۈعيـن من صعۈد اڷـآيقۈنـﮧ إڷى اڷـآعڷى ۈاحده بـ ٺقنيـۃ اڷـ CSS
ۈهيا اڷمۈجۈده في مدۈنٺـي .. حيث ٺڷاحظۈ اڷأنٺقاڷ بسرع‘ـﮧ إڷى أعڷى اڷصفـζـﮧ ۈبقاء اڷـآيقۈنه
ۈاڷٺقنيـۃ اڷـآخرى هيا ٺقنيـۃ اڷـ Jquery ۈهيا اڷـآجمڷ , ۈڷـ مُشاهدٺها ٺفضڷۈ بزيارة مدۈنـۃ اڷأخ نسنۈس
ۈسٺڷاحظۈن عند اڷنقر ع أيقۈنـۃ اڷسهم اڷصعۈد إڷى أعڷى اڷصفحـﮧ بشڪڷ رائع
ۈأخٺفاء اڷأيقۈنـۃ ۈهيا باڷأعڷى ۈظهۈرها عند اڷنزۈڷ
ٺسٺطيععـۈن اڷآن اضافـۃ ذڷڪ فِـي مدۈناٺڪم بڪُڷ سهۈڷـۃ
اٺبع‘ـۈ اڷششرح
ڷـ إضافة ٺقنيـۃ اڷـ CSS
اٺبعۈ اڷمسار اڷٺاڷي :- ڷۈحـۃ اڷٺحڪم ~> اڷٺصميم ~> ٺحرير HTML
اضغطۈ ع اخٺصار Ctrl+F ۈأڷصقۈ اڷۈسم اڷآٺي ڷـ اڷبحث عـنـﮧ </body> ۈقۈمۈ بآضافـۃ اڷڪۈد اڷٺاڷي قبڷ اڷۈسم
<a title="Back to TOP" style="position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;" href="#"><img border="0" alt="Back to TOP" src="http://i.imgur.com/Ffb7p.png"></a>
ڷـ إضافـۃ ٺقنيـۃ اڷـ Jquery
اٺبعۈ اڷمسار اڷٺاڷي :- ڷۈحـۃ اڷٺحڪم ~> اڷٺصميم ~> ٺحرير HTML
اضغطۈ ع اخٺصار Ctrl+F ۈأڷصقۈ اڷۈسم اڷآٺي ڷـ اڷبحث عـنـﮧ </body> ۈقۈمۈ بآضافـۃ اڷڪۈد اڷٺاڷي قبڷ اڷۈسم
<style type="text/css">
#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function() {
$("#w2b-StoTop").scrollToTop();
});
</script>
<a href='#' id='w2b-StoTop' style='display:none;'><img src='http://www.3asq.com/img/uploads/13272648341.png '/> </a>
#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function() {
$("#w2b-StoTop").scrollToTop();
});
</script>
<a href='#' id='w2b-StoTop' style='display:none;'><img src='http://www.3asq.com/img/uploads/13272648341.png '/> </a>
ۈإذ مارغبٺـم بـ ٺغيير اڷصۈره , قۈمۈ برفع أي ايقۈنـۃ ٺرۈقڪم ۈاسٺبدڷۈها بمڪان اڷرابط اڷمڷۈن باڷڷۈن اڷأحمر
إضافـۃ بسيطـﮧ ۈڷڪنها رائع‘ـﮧ ..~
أڷقآئـڪم فِـي إضافـۃ جديده .. ۈسأطرحها بـ عع‘ـۈن اڷڷه قريباً
ۈاڷمعذره منڪم ٺَـم إغڷاق صندۈق اڷٺعڷيقاٺ ڷـ ۈجۈد خڷڷ باڷمدۈنـﮧ حاڷما اصڷـζـﮧ سأفٺـζـﮧ
اسسٺۈدععـڪم اڷڷه