سلام به همه ی دوستان امیدوارم حالتون خوب باشه , امروز آموزش افزودن دکمه ی رفتن به بالای سایت رو براتون اماده کردم که با استفاده از اون می تونید یک دکمه در سایتتون ایجاد کنید و با کلیک بر روی این دکمه به بالای سایت برگردید البته بعد از این که صفحه رو اسکرول می کنید به سمت پایین ظاهر میشه. حتما تو بیشتر سایت ها این ویژگی رو دیدید که امکان خیلی خوبی هستش و لازمه که در سایت باشه. همچنین زیبایی خاصی رو به وب سایت می بخشه. فک کنید که یک پست یا مطلبی رو نوشتید که خیلی طولانی شده , وقتی بازدید کننده تا انتهای صفحه میره و بعدش می خواد به بالا یل ابتدای صفحه برگرده راه هایی که برای برگشت به بالای سایت هست اینه که صفحه رو با دکمه ی اسکرول ماوس اسکرول کنیم تا بالا و اینکه با نوار اسکرول سریع صفحه رو به سمت بالا اسکرول کنیم. و راه بعدی هم این دکمه هستش که نسبت به دو روش قبلی زیباتر هستش.
خوب بریم سراغ کدی که دکمه ی برگشت به بالا سایت رو نشون میده :
ابتدا کد زیر رو در فایل هدر قرار دهید بین تگ <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 https://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(https://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=https://bigtheme.ir/wp-content/demo%20files/go%20top%20botoom/scrolltotop.html bottom_text=”آنلاین دکمه ی بازگشت به بالا”]دموی[/button_search_c]
لینک کوتاه: https://bigtheme.ir/?p=707
منبع: bigtheme
از کدی که گذاشتید،ممنون
این مورد به مرورگر ارتباطی نداره دوست عزیز صفحه سایتتون رو با کلید های ترکیبی ctrl+f5 رفرش کنید
با سلام و خسته نباشید من این دستوراتو انجام دادم تو مرورگر کروم بدرستی اومد ولی با فایرفاکس میرم نیست باید چیکار کنم!؟
cadigital.ir
یه روشی به بچه های گل میگم یادتون باشه.
اول رو فلش بالا برنده این سایت راست کلیک کنید.
بعدش inspect elemet رو انتخاب کنید.
بعد تمام ک های سایت میاره میتونید با کمی وقت گذاشتن کل یه سایت رو کپی کنید 🙂
یا خدا…
سلام
کد مفیدی بود ولی با کمی تغییرات توی استیل میشه جلوه زیبایی بهش اضافه کرد
در کل ممنون
fun-iran.ir
ممنون عالی بود
درود.
برای وردپرس افزونه ی Scroll Up میتونه بسیار موثر باشه. بدون کد نویسی و ویرایش فایل های پوسته!
همین اموزش هست فقط رنگ و استایلش فرق می کنه
میشه بگی چجوری درست کردیش.
سلام.
اگه میشه کد دکمه سایت خودتون رو که به رنگ آبیه بزارین.(همونیکه گوشه سمت راست پایین صفحه است)
مرسی.
خوب این هم یه تصویره دیگه فلش رو به بالا رمینش هم رنگی هست برای سفارشی سازی و تغییر تصویر باید کدهای css رو تغییر بدید
اگر بخوایم که یک عکس مشخصی رو داشته باشه چی کار باید بکنیم
کا کامل خودتون رو می گذارید خیلی زیباست
واقعا عالی شده
مرسی اوکی شد! البته با تغییرات گسترده، خوشحال میشم ببینی!
qbestgoldiran.com
سلام
در فایل style.css این کد رو پیدا کنید
#back-top {
bottom: 30px;
left: 15px;
position: fixed;
}
و به جای left:15px; بنویسید
right;15px;
مرسی، عالی بود، حالا اگه بخوایم این فلش بیاد سمت راست صفحه (مثل فلش سایت خودتون) باید چیکار کنم؟