Blogchi

بـلاگچی

قالب وردپرس | آموزش وردپرس | بهینه سازی | طراحی و ترجمه قالب های وبلاگ

کد انتقال بازدیدکننده به بالای صفحه

کد انتقال بازدیدکننده به بالای صفحه

کد جاوا اسکریپت انتقال بازدیدکننده به بالای صفحه

ابزار هدایت به بالای صفحه در هر بخشی که بازدید کننده در حال مشاهده و مطالعه مطالب سایت شما باشد نمایش داده می شود و تنها با یک کلیک بر روی آن بیننده را به بالای صفحه هدایت می کند.

برای استفاده از این ابزار از روش های زیر استفاده می کنیم.

روش اول – لینک ساده اسکرول :
ابتدا کدهای CSS زیر رو در قالب وبلاگ خود و بین تگ های <style></style> قرار بدید.


#back-top{
    position: fixed;
bottom: 30px;
    float:right;
    right:10px}
#back-top a{
    width: 108px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;text-decoration: none;
    color: #bbb;
    -webkit-transition: 1s;
    -moz-transition: 1s;transition: 1s;
}
#back-top a:hover{
color: #000;
}
#back-top span {
    width: 108px;
    height: 108px;
    display: block; 
margin-bottom: 7px;
    background: #ddd url(http://s3.picofile.com/file/7917759030/up23.png) no-repeat center center;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}

سپس کد زیر را در انتهای کد قالب وبلاگ و قبل از تگ </body> قرار بدید.


<p id="back-top">
<a href="#top"><span></span>Back to Top</a>
</p>

چون کد بالا به عنصری با آیدی top در صفحه اشاره میکنه لذا باید این آیدی رو به بالاترین عنصر صفحه یعنی تگ <body> اضافه کنیم. بصورت زیر :


<body id="top"> ... </body>

روش دوم – لینک اسکرول با توابع جاوا اسکریپت :

در این روش با کمک خاصیت های جاوا اسکریپت، کمی به کدهای خود افکت و زیبایی می بخشیم. خوبی این روش در حجم پائین آن است.
ابتدا کد اسکریپت زیر رو بین تگ های <head></head> قالبتون قرار بدید.


<script type="text/javascript">
//<![CDATA[
function currentYPosition() {
// Firefox, Chrome, Opera, Safari
if (self.pageYOffset) return self.pageYOffset;
// Internet Explorer 6
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
// Internet Explorer 6, 7 and 8
if (document.body.scrollTop) return document.body.scrollTop;
return 0;
}
function elmYPosition(eID) {
var elm = document.getElementById(eID);
var y = elm.offsetTop;
var node = elm;
while (node.offsetParent && node.offsetParent != document.body) {
node = node.offsetParent;
y += node.offsetTop;
} return y;
}
function smoothScroll(eID) {
var startY = currentYPosition();
var stopY = elmYPosition(eID);
var distance = stopY > startY ? stopY - startY : startY - stopY;
if (distance < 100) {
scrollTo(0, stopY); return;
}
var speed = Math.round(distance / 100);
if (speed >= 20) speed = 20;
var step = Math.round(distance / 25);
var leapY = stopY > startY ? startY + step : startY - step;
var timer = 0;
if (stopY > startY) {
for ( var i=startY; i<stopY; i+=step ) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY += step; if (leapY > stopY) leapY = stopY; timer++;
} return;
}
for ( var i=startY; i>stopY; i-=step ) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
}
}
//]]>
</script>

حالا کد زیر رو در پائین صفحه خود قرار بدید. می تونید قبل از </body> قرار بدید.


<a href="#top" onclick="smoothScroll('top'); return false">رفتن به بالای صفحه</a>

چون کد بالا به عنصری با آیدی top در صفحه اشاره میکنه لذا باید این آیدی رو به بالاترین عنصر صفحه یعنی تگ <body> اضافه کنیم. بصورت زیر :

</div>
<div class="coding"><body id="top"> ... </body></div>
<div class="coding">

روش سوم – لینک اسکرول با توابع جی کوئری :

در این روش باید کتابخانه جی کوئری رو به قالب خودمون اضافه(ایمپورت) کنیم. برای اینکار می تونیم از از فایل کتابخانه جی کوئری که در سرور گوگل قرار داره استفاده کنیم و یا فایل رو روی هاست خودمون بصورت مستقل داشته باشیم. در اینجا ما از کتابخانه گوگل استفاده کردیم.

ابتدا کد زیر رو بین تگ های <head></head> قرار بدید.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, ۸۰۰);
return false;
});
});

});
//]]>
</script>

حالا کدهای CSS زیر رو بین تگ های <style></style> قرار بدید.


#back-top{
position: fixed;
bottom: 30px;
float:right;
right:10px}
#back-top a{
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;text-decoration: none;
color: #bbb;
-webkit-transition: 1s;
-moz-transition: 1s;transition: 1s;
}
#back-top a:hover{
color: #000;
}
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(http://s3.picofile.com/file/7917759030/up23.png) no-repeat center center;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}

سپس کد زیر را در انتهای کد قالب وبلاگ و قبل از تگ </body> قرار بدید.

</div>
<div class="coding"><p id="back-top">
<a href="#top"><span></span>Back to Top</a>
</p></div>
<div class="coding">

چون کد بالا به عنصری با آیدی top در صفحه اشاره میکنه لذا باید این آیدی رو به بالاترین عنصر صفحه یعنی تگ <body> اضافه کنیم. بصورت زیر :


<body id="top"> ... </body>

نظرات شما

  1. ali می‌گه:

    سلام
    سایتتان خیلی دیر دیر آپدیت میشه اگه بشه زود آپدیت کنید تا از مطالبتان استفاده کنیم
    ممنون میشم