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

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

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

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

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

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

روش اول – لینک ساده اسکرول :

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

[php]</p>
<p style="text-align: left;">#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(https://s3.picofile.com/file/7917759030/up23.png) no-repeat center center;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}</p>
<p style="text-align: left;">[/php]

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

[php]<br data-mce-bogus="1">

&lt;p id="back-top"&gt;
&lt;a href="#top"&gt;&lt;span&gt;&lt;/span&gt;Back to Top&lt;/a&gt;
&lt;/p&gt;

[php/]<br data-mce-bogus="1">

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

[php]<br data-mce-bogus="1">

&lt;body id="top"&gt; … &lt;/body&gt;

[/php]

 

 

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

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

[php]</p>
<p style="text-align: left;"><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></p>
<p style="text-align: left;">[/php]

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

[php]</p>
<p style="text-align: left;"><a href="#top" onclick="smoothScroll(‘top’); return false">رفتن به بالای صفحه</a></p>
<p style="text-align: left;">[/php]

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

[php]</p>
<p style="text-align: left;"></div>
<div class="coding"><body id="top"> … </body></div>
<div class="coding"></p>
<p style="text-align: left;">[/php]

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

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

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

[php]</p>
<p style="text-align: left;"><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></p>
<p style="text-align: left;">[/php]

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

[php]</p>
<p style="text-align: left;">#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(https://s3.picofile.com/file/7917759030/up23.png) no-repeat center center;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}</p>
<p style="text-align: left;">[/php]

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

[php]</p>
<p style="text-align: left;"></div>
<div class="coding"><p id="back-top">
<a href="#top"><span></span>Back to Top</a>
</p></div>
<div class="coding"></p>
<p style="text-align: left;">[/php]

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

[php]</p>
<p style="text-align: left;"><body id="top"> … </body></p>
<p style="text-align: left;">[/php]

شما هم دیدگاهی برای این مطلب ارسال کنید

نام شما

ایمیل شما

وب سایت شما
تبلیغات دورانیت

تبلیغات دورانیتتبلیغات دورانیت

تبلیغات دورانیت

... درباره ی دورانیت ...

دورانیت از مجموع دو کلمه دوران Doran + آی تی IT راه اندازی شده است.

... ابر برچسب ها ...

آدرس سایت سکه ثامن آموزش زبان ترکیه ای با آهنگ اس ام اس رسمی تبریک تولد مهر ماه اعدام امیر تتلو امیر تتلو مرتد شد اهانت امیر تتلو به امام حسین ع اهانت امیر تتلو در اینستاگرام به شهدای حادثه اهواز اینستاگرام امیر علی اکبری اینستاگرام ساشا سبحانی اینستاگرام وحید خزایی برنامه مذهبی اندروید بیوگرافی بازیگران تتوی جدید امیر تتلو تحقیق برای درس شناخت هنر گرافیک ترجمه آهنگ ایلیاس ترجمه آهنگ های خواننده ترکیه ای الیاس ترجمه فارسی آهنگ ترکی ایلیاس ترجمه فارسی آهنگ ترکی مورات بز تشییع جنازه عزت الله انتظامی تعداد کشته های حمله تروریستی اهواز تعداد کشته و شهید حادثه تروریستی رژه اهواز توهین امیر تتلو به محرم و امام حسین توهین رسایی به امیر تتلو و واکنش توهین ساشا سبحانی حکم مرتدد و ارتداد امیر تتلو داعش در اهواز دانلود رایگان قالب فروشگاهی فارسی و رسپانسیو درمان مشکل نعوظ مردان با زنجبیل دستگیری وحید خزایی در ترکیه سپیده بزمی پور همسر شاهرخ استخری شایعه حمید هیراد شهریور یعنی... طرز تهیه زنجبیل تازه طرز صحیح مصرف تخم کتان عکس امیر تتلو در دریا شنا کردن عکس امیر علی اکبری و همسرش عکس برای پست اینستاگرام محرم عکس تلگرام مهر ماهیم عکس نوشته شب اربعین عکس نوشته های اسم برای محرم عکسنوشته های شعر محرم عکس نوشته گریه آور پاییز 97 عکس های عاشقانه گریه آور پاییز عکس های مراسم تشییع عزت الله انتظامی عکس پروفایل دخترونه مهر ماهی عکس پروفایل گریه آور پاییزی فرهاد زاهدی فر مدیر سکه ثامن قد امیر تتلو ماجرای حمله تروریستی در اهواز محرم 97 مسئولیت حمله تروریستی امروز در اهواز مصرف تخم شربتی در حاملگی مهر ماهی جان تولد مبارک + عکس میلاد پیامبر واقعیت سفر به گذشته در زمان واکنش هنرمندان به ازدواج سمانه پاکدل و هادی کاظمی وحید خزایی تحت تعقیب ولادت حضرت محمد پیام ادبی تسلیت محرم کد تبلیغات متنی برای وبلاگ و سایت

©دورانیت / بازنشر مطالب بلامانع است