خرید هاست ارزدیجیتال
حراجی دامنه های ویژهمشاهده





تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

کد رفتن به بالای صفحه سایت و وبلاگ

CSS / HTML , آموزش طراحی , آموزش ها , مقالات,آموزش,ترفند , وردپرس

الان که دارم این مطلب رو تو سایت قرار میدم ، خیلی تو سایت ها و وبلاگ ها مد شده که یک دکمه برای برگشت یا رفتن به بالای صفحه سایت یا وبلاگ قرار میدن تا بازدید کننده بتونه به راحتی و بدون استفاده از اسکرول بار به بالای صفحه هدایت بشه.برای همین امروز من یک کد دکمه برگشت به بالای صفحه که برای همه سایت ها و وبلاگ ها کار میکنه تو سایت قرار دادم که اگر دوست داشتید همچین ابزاری رو به سایت یا وبلاگتون اضافه کنید.

کد رفتن به بالای صفحه سایت و وبلاگ

کد دکمه رفتن به بالای صفحه

همونطور که در انتها هم دموی این کد رو قرار دادم ، وقتی که به انهای سایت میرسین یک دکمه کم رنگ مثل شکل بالا ظاهر میشه که با رفتن موس بر روی آن پررنگ میشه و با کلیک کردن روی اون به صورت آرام کاربر به بالای صفحه هدایت میشه.

کد css دکمه برگشت به بالای صفحه

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

#back-top {
 position: fixed;
 bottom: 30px;
 margin-left: -150px;
}

#back-top a {
 width: 108px;
 display: block;
 text-align: center;
 font: 11px/100% Tahoma,Arial, Helvetica, sans-serif;
 text-transform: uppercase;
 text-decoration: none;
 color: #bbb;

/* transition */
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s;
}
#back-top a:hover {
 color: #000;
}

/* arrow icon (span tag) */
#back-top span {
 width: 54px;
 height: 63px;
 display: block;
 margin-bottom: 7px;
 background: url(http://www.20script.ir/wp-content/uploads//up-arrow.png) no-repeat center center;

/* rounded corners */
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;

/* transition */
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s;
}
#back-top a:hover span {
 background-color:;
}

 

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

کد html رفتن رفتن به بالای سایت و وبلاگ

حالا باید کد زیر رو قبل از تگ <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>

 

اگر از وردپرس استفاده میکنید توی صفحه header.php  تگ header رو می تونید پیدا کنید.

کد آخر که الان می زارم هم باید در زیر تگ <body> هر کجا که دوست داشتید قرار بدید ، توصیه میکنم در آخرا قرار بدید.

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

 

آموزش قرار دادن کد بالا رفتن در وبلاگ

اگر این دکمه رو برای وبلاگ می خواهید شاید یکم تو قرار دادن اون css ها مشکل پیدا کنن بعضی ها ( البته شما که استاد مائید !! )

۲ حالت ممکن پیش بیاد یا کدهای css و html تو قالب وبلاگتون کنار همه که خیلی آسون میشه فقط کافیه اون قسمتی که شیوه نامه ها هستش رو پیدا کنید و در انتهاشون قرار بدید.

اما حالت دوم این که اکثرا سایت های ارائه دهنده قالب وبلاگ فایل style.css رو جداگانه آپلود میکنن که شما باید این فایل رو دانلود کنید سپس کد ها رو اضافه کنید سپس این فایل رو یکجا آپلود کنید سپس توی قالب آدرس فایل جدید style.css رو وارد کنید.

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 1 / 5. تعداد رای : 1

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 9 CSS / HTML , آموزش طراحی , آموزش ها , مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=2352
کلمات کلیدی پست :
مطالب مرتبط
14,454اسکریپت مدیریت محتوا Pandao CMS Pro نسخه 2.9 تاریخ : 2016/03/7
40,823حل مشکل فاصله‌ خط ها در ویرایشگر وردپرس با افزونه Tinymce Advanced تاریخ : 2014/08/19
9,851اسکریپت Whois دامنه NameBot نسخه 2.2 تاریخ : 2014/12/1
11,412اسکریپت راه اندازی وبسایت عکاسی Maro Phpotographer تاریخ : 2020/08/22
10,783نکات قابل توجه برای راه اندازی سایت تاریخ : 2013/12/13
16,080اسکریپت راه اندازی مارکت پلیس Modesy تاریخ : 2020/11/30
10,190ترمیم صفحه‌های 404 وردپرس با افزونه 404to301 تاریخ : 2016/04/3
22,022اسکریپت مبدل ارز بیت کوین Bitcoin Calculator تاریخ : 2017/08/31
13,846افزونه دریافت خودکار اطلاعات فیلم و سریال IMDBi نسخه 2.0.0 تاریخ : 2016/02/19
10,552اسکریپت بررسی نام کاربری و برند در شبکه های اجتماعی Social Existence تاریخ : 2018/07/17
10,412دانلود نرم افزار تست پروژه های برنامه نویسی HttpMaster Pro تاریخ : 2019/08/5
33,017اسکریپت مدیریت پروژه Ekushey تاریخ : 2016/09/8
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file