خانه / آموزش کدهای وردپرس / آموزش افزودن دکمه ی رفتن به بالای سایت
درگاه, درگاه پرداخت, درگاه واسطه پرداخت, فری پی
Go-to-back-bottom

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

آموزش افزودن دکمه ی رفتن به بالای سایتReviewed by هادی on Jul 15Rating:

سلام به همه ی دوستان امیدوارم حالتون خوب باشه , امروز آموزش افزودن دکمه ی رفتن به بالای سایت رو براتون اماده کردم که با استفاده از اون می تونید یک دکمه در سایتتون ایجاد کنید و با کلیک بر روی این دکمه به بالای سایت برگردید البته بعد از این که صفحه رو اسکرول می کنید به سمت پایین ظاهر میشه. حتما تو بیشتر سایت ها این ویژگی رو دیدید که امکان خیلی خوبی هستش و لازمه که در سایت باشه. همچنین زیبایی خاصی رو به وب سایت می بخشه. فک کنید که یک پست یا مطلبی رو نوشتید که خیلی طولانی شده , وقتی بازدید کننده تا انتهای صفحه میره و بعدش می خواد به بالا یل ابتدای صفحه برگرده راه هایی که برای برگشت به بالای سایت هست اینه که صفحه رو با دکمه ی اسکرول ماوس اسکرول کنیم تا بالا و اینکه با نوار اسکرول سریع صفحه رو به سمت بالا اسکرول کنیم. و راه بعدی هم این دکمه هستش که نسبت به دو روش قبلی زیباتر هستش.

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

خوب بریم سراغ کدی که دکمه ی برگشت به بالا سایت رو نشون میده :

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

اسکریپت زیر رو هم داخل همین فایل زیر کد بالایی قرار دید :

<script>
$(document).ready(function(){

// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});

// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
</script>

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

<p id="back-top">
<a href="#top"><span></span>برو بالا</a>
</p>

خوب تا حالا نوشته ی ما ایجاد شده که باید کمی بهش استایل بدیم و زیباترش کنیم. استایلی که براتون آماده کردم رو می تونید به فایل style.css قالبتون اضافه کنید. اینم کد css

/*
Back to top button for http://bigtheme.ir
*/
#back-top {
position: fixed;
bottom: 30px;
left: 15px;
}
#back-top a {
width: auto;
display: block;
text-align: center;
font: 11px/100% tahoma, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon css code (code tag spam) */
#back-top span {
width:70px;
height: 70px;
display: block;
margin-bottom: 7px;
background: #ddd url(http://bigtheme.ir/wp-content/uploads/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* background color */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}

 

حال با ذخیره ی تغییرات می تونید نتیجه ی کارتون رو مشاهده کنید.

امید ورادم آموزش افزودن دکمه ی بازگشت به بالا سایت براتون مفید بوده باشه , آرزومند بهترین ها برای شما …

[button_search_c url=http://bigtheme.ir/wp-content/demo%20files/go%20top%20botoom/scrolltotop.html bottom_text=”آنلاین دکمه ی بازگشت به بالا”]دموی[/button_search_c]

لینک کوتاه: http://bigtheme.ir/?p=707

منبع: bigtheme

باکس دانلود

16 دیدگاه

  1. مرسی، عالی بود، حالا اگه بخوایم این فلش بیاد سمت راست صفحه (مثل فلش سایت خودتون) باید چیکار کنم؟

  2. کا کامل خودتون رو می گذارید خیلی زیباست

  3. اگر بخوایم که یک عکس مشخصی رو داشته باشه چی کار باید بکنیم

    • خوب این هم یه تصویره دیگه فلش رو به بالا رمینش هم رنگی هست برای سفارشی سازی و تغییر تصویر باید کدهای css رو تغییر بدید

  4. سلام.
    اگه میشه کد دکمه سایت خودتون رو که به رنگ آبیه بزارین.(همونیکه گوشه سمت راست پایین صفحه است)
    مرسی.

  5. درود.
    برای وردپرس افزونه ی Scroll Up میتونه بسیار موثر باشه. بدون کد نویسی و ویرایش فایل های پوسته!

  6. ممنون عالی بود

  7. سلام
    کد مفیدی بود ولی با کمی تغییرات توی استیل میشه جلوه زیبایی بهش اضافه کرد
    در کل ممنون
    fun-iran.ir

  8. یه روشی به بچه های گل میگم یادتون باشه.
    اول رو فلش بالا برنده این سایت راست کلیک کنید.
    بعدش inspect elemet رو انتخاب کنید.
    بعد تمام ک های سایت میاره میتونید با کمی وقت گذاشتن کل یه سایت رو کپی کنید 🙂
    یا خدا…

  9. با سلام و خسته نباشید من این دستوراتو انجام دادم تو مرورگر کروم بدرستی اومد ولی با فایرفاکس میرم نیست باید چیکار کنم!؟

    cadigital.ir

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


تخفیفات و بروز رسانی و اطلاعات جدید سایت در کانال تلگرام ما bigtheme_ir@
Hello. Add your message here.

دنبال کردن