البحث عن
</head>
فوقه
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>
البحث عن
]]></b:skin>
فوقه
#back-to-top{background:#008000;color:#ffffff;padding:8px 10px;font-size:24px;border-radius:4px} .back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}
البحث عن
</body>
فوقه
<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'> <i class='fa fa-chevron-up'/> </a></div> <script> $(window).scroll(function() { if($(this).scrollTop() > 200) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); $('#back-to-top').hide().click(function() { $('html, body').animate({scrollTop:0}, 1000); return false; }); </script>
fakeaT4.0.3-1 css
البحث عن
</body>
فوقه ضع
<!-- زر الصعود و النزول -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>
<style>
/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: transparent url(http://2.bp.blogspot.com/-ag7DhpP9sOo/VdGw17pkoKI/AAAAAAAAA-A/APyMKQPxZC8/s1600/gotop.png ) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
left:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: transparent url(http://4.bp.blogspot.com/-t-YCzFHA3xU/VdGxDRcqyaI/AAAAAAAAA-M/wKG9obeyHRA/s1600/godown.png ) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
left:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>
<!-- زر الصعود و النزول -->
fakeaTv1.7.1-1 js
البحث عن
</body>
فوقه
<style>
#sbtbacktotop{
background: url(//1.bp.blogspot.com/-CH03QlSNpBY/UnCY1gMhmXI/AAAAAAAACaM/qZaVYNrP0-s/s1600/back-to-top-sprite-30224d9b.png) 0 0 no-repeat;
height: 130px;
width: 72px;
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
transition:none;
z-index:15;
}
#sbtbacktotop:hover{
background:url(//1.bp.blogspot.com/-CH03QlSNpBY/UnCY1gMhmXI/AAAAAAAACaM/qZaVYNrP0-s/s1600/back-to-top-sprite-30224d9b.png)no-repeat;
background-position: 0 -142px;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100)
{$("#sbtbacktotop").removeAttr("href");$("#sbtbacktotop").stop().animate(
{bottom:"0"},{duration:100,queue:false})}
else{$("#sbtbacktotop").stop().animate({bottom:"30000"},
{duration:8000,queue:false})}});$(function()
{$("#sbtbacktotop").click(function()
{$("html, body").animate({scrollTop:0},"slow");
return false})});
//]]>
</script>
<a href='#' id='sbtbacktotop'></a>
fakeaT1.10.0-1 js
وابحث عن الكود التالي
</body>
ثم اضف قبله هذا الكود التالي
<a href='#' id='backtotop'><img alt='back to top' src='http://3.bp.blogspot.com/-68NBxtrqcog/Tq7Un9EXfrI/AAAAAAAAArs/YmmiZhtQEbc/s1600/9.png'/></a>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord ='السابق';
var downPageWord ='التالي';
</script>
إذا أردت تغيير شكل الأيقونة غير ما باللون الأحمر برابط الصورة المراد وضعها
(ثالثاً)
ثم ابحث عن الكود التالي
]]></b:skin>
واضف قبله هذا الكود
#backtotop {
padding:5px;
position:fixed;
bottom:5px;right:5px;
cursor:pointer;
}
يمكنك عند هذا تم الرفع جرب واذا لا قم بالتالي اللى تحت
هذه الأداة تكون في الجهة اليمنى فإذا أردتها بالجهة اليسرى غير left إلى right
HTML/JavaScript
ثم تنسخ الكود التالي وتضعه في مربع أكواد الأداة
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script
type="text/javascript" >
var scrolltotop={
scrolled before showing control
scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000,
fadeduration:[500, 100]},
controlHTML: '<img
src="https://lh6.googleusercontent.com/-eju6DAQA5LI/VMilpk7jfUI/AAAAAAAABW8/3wWKFn7GY2A/s57-no/curved-arrow-clipart.png"
/>',
ID="topcontrol"
controlattrs: {offsetx:5, offsety:5},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto :
parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest},
this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() -
this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() -
this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)?
true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1},
this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false &&
this.state.isvisible){
this.$control.stop().animate({opacity:0},
this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws &&
document.compatMode=="CSS1Compat" && window.XMLHttpRequest
mainobj.$body=(window.opera)?
(document.compatMode=="CSS1Compat"? $('html') : $('body')) :
$('html,body')
mainobj.$control=$('<div id="topcontrol">
'+mainobj.controlHTML+'</div>
')
.css({position:mainobj.cssfixedsupport? 'fixed' :
'absolute', bottom:mainobj.controlattrs.offsety,
right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest
&& mainobj.$control.text()!
mainobj.$control.css({width:mainobj.$control.width()})
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword
+'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
scrollup js
البحث عن
</body>
فوقه
<button id="scrollToTop" data-upspeed='1000' data-upshow='600' class="scrollToTop">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24">
<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</button>
<script src='//cdn.jsdelivr.net/gh/imintweb/Js/scrollup.min.js'></script>
إذا أردت تغيير شكل الأيقونة غير ما باللون الأحمر برابط الصورة المراد وضعها
البحث عن
]]></b:skin>
فوقه
.scrollToTop {
outline: 0;border: 0;font - size: 14 px;cursor: pointer
}.scrollToTop svg {
display: block
}.scrollToTop {
position: fixed;z - index: 9999;opacity: 0;pointer - events: none;transition: opacity .3 s,
background .3 s,
-webkit - transform .3 s;transition: transform .3 s,
opacity .3 s,
background .3 s;transition: transform .3 s,
opacity .3 s,
background .3 s,
-webkit - transform .3 s; - webkit - transform: translateY(-2e m);transform: translateY(-2e m)
}.scrollToTop.visible {
pointer - events: all;
opacity: 1; - webkit - transform: translateY(0);
transform: translateY(0)
}
.scrollToTop svg {
fill: #fff
}.scrollToTop {
background - color: #252525;box-shadow:0 1px 4px rgba(0,0,0,.5);bottom:1em;right:1em;padding:.5em;border-radius:4px}.scrollToTop:hover{background-color:# 020202
}