اضافة زر صعود الى اعلى بشكل فلاتي واحترافي

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد على ال محمد 

اليوم في هذا درس جديد وحصري على مدونة حمزه ويب راح نقدم لكم كيفية اضافة 

زر صعود الى اعلى بشكل احترافي ورائع وجميل 

شرح تركيب اضافة زر صعود الى اعلي 

1. لوحة تحكم 
2.قالب
3.تحرير HTML
ابحث عن هذا كود <head/>
واضف هذا كود فوقة 

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

ثم ابحث عن هذا كود ]]></b:skin

وضع هذا كود فوقة 

.smoothscroll-top {    position:fixed;    opacity:0;    visibility:hidden;    overflow:hidden;    text-align:center;    z-index:99;    background-color:#2ba6e1;    color:#fff;    width:47px;    height:44px;    line-height:44px;    right:25px;    bottom:-25px;    padding-top:2px;    border-radius:5px;    transition:all 0.5s ease-in-out;    transition-delay:0.2s;}.smoothscroll-top:hover {    background-color:#3eb2ea;    color:#fff;    transition:all 0.2s ease-in-out;    transition-delay:0s;}.smoothscroll-top.show {    visibility:visible;    cursor:pointer;    opacity:1;    bottom:25px;}.smoothscroll-top i.fa {    line-height:inherit;}

ثم ابحث عن هذا كود <body/>


ثم ضع هذا كود فوقة 

<span class="scroll-top-inner"><i class="fa fa-2x fa-arrow-circle-up"></i></span></div><script type='text/javascript'>//<![CDATA[$(function(){ $(document).on( 'scroll', function(){if ($(window).scrollTop() > 100) {$('.smoothscroll-top').addClass('show');} else {$('.smoothscroll-top').removeClass('show');}}); $('.smoothscroll-top').on('click', scrollToTop);}); function scrollToTop() {verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;element = $('body');offset = element.offset();offsetTop = offset.top;$('html, body').animate({scrollTop: offsetTop}, 600, 'linear');}//]]></script>

ثم اضغط حفظ 




وانتظروا كل جديد وحصري من حمزه ويب

اي استفسار ضع تعليقا 

في امان الله