سلام به همه ی دوستان امیدوارم حالتون خوب باشه , امروز آموزش افزودن دکمه ی رفتن به بالای سایت رو براتون اماده کردم که با استفاده از اون می تونید یک دکمه در سایتتون ایجاد کنید و با کلیک بر روی این دکمه به بالای سایت برگردید البته بعد از این که صفحه رو اسکرول می کنید به سمت پایین ظاهر میشه. حتما تو بیشتر سایت ها این ویژگی رو دیدید که امکان خیلی خوبی هستش و لازمه که در سایت باشه. همچنین زیبایی خاصی رو به وب سایت می بخشه. فک کنید که یک پست یا مطلبی رو نوشتید که خیلی طولانی شده , وقتی بازدید کننده تا انتهای صفحه میره و بعدش می خواد به بالا یل ابتدای صفحه برگرده راه هایی که برای برگشت به بالای سایت هست اینه که صفحه رو با دکمه ی اسکرول ماوس اسکرول کنیم تا بالا و اینکه با نوار اسکرول سریع صفحه رو به سمت بالا اسکرول کنیم. و راه بعدی هم این دکمه هستش که نسبت به دو روش قبلی زیباتر هستش.
خوب بریم سراغ کدی که دکمه ی برگشت به بالا سایت رو نشون میده :
ابتدا کد زیر رو در فایل هدر قرار دهید بین تگ <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