طراحی سایت | طراحی سایت تهران | طراحی سایت ارزان

با ما تماس بگیرید : 5-44251104-021
به نام بهترین طراح دنیا
  • طراحی سایت
آموزش درست کردن اسکرول به سمت بالا - 3.0 out of 5 based on 2 votes

امتیاز کاربران

ستاره فعالستاره فعالستاره فعالستاره غیر فعالستاره غیر فعال
 

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

در طراحی سایت و طراحی وب سایت و طراحی قالب سایت امروزه زیبایی و جالب بودن سایت حرف اول را میزند پس سعی کنید سایتی طراحی کنید که جذاب باشد.

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

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

در این آموزش به شما خواهد آموخت که چگونه می توانید اسکرول متحرک به بالا دکمه با جی کوئری ایجاد کنید.

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

<a href="#" class="scrollToTop">برگشت به بالا</a>

 وارد کردن کدهای css که خودتان می توانید عوض کنید در سایت بستگی به سلیقه خودتان دارد

.scrollToTop{
	width:100px; 
	height:130px;
	padding:10px; 
	text-align:center; 
	background: whiteSmoke;
	font-weight: bold;
	color: #444;
	text-decoration: none;
	position:fixed;
	top:75px;
	right:40px;
	display:none;
	background: url('arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
	text-decoration:none;
}

 

 با این کار دکمه به سمت بالا می رود و افکت و ظاهر جالبی ندارد

با کدهای jquery حالت جالب تری دکمه پایین بالا می رود

و بعد از رسیدن به بالا محو می شود.

با وارد کدهای jquery شما یک دکمه رو به بالا درست کردید

$(document).ready(function(){
	
	//Check to see if the window is top if not then display button
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.scrollToTop').fadeIn();
		} else {
			$('.scrollToTop').fadeOut();
		}
	});
	
	//Click event to scroll to top
	$('.scrollToTop').click(function(){
		$('html, body').animate({scrollTop : 0},800);
		return false;
	});
	
});

 

 شما می توانبد در این کد تغییرات بدهید و نتیجه آن را مشاهده کنید

با آموزشهای بعدی ما همراه باشید

منبع : تیم مهندسین ساین وب

 

درباره نويسنده

رضا رجب پور هستم کارشناسي رشته فناوري اطلاعات و ارتباطات 4 سال تجربه کاري در زمينه طراحي سايت و بهينه سازي سايت را دارم و به زبانهاي Html , CSS , CSS3 , Jquery , JavaScript , PHP تسلط کافي را دارم و مدير تيم مهندسين ساين وب که با چند تن از دوستان رشته نرم افزار و گرافيک يک تيم خلاق و با تجربه را ايجاد کرده ايم و بيش از 80 نمونه کار طراحي سايت و بهينه سازي سايت در ايران و خارج از ايران انجام داده ايم و خوشحال مي شويم که اطلاعات و تجربيات خود را در اختيار ديگران و هموطنان عزيز قرار دهيم لطفا ما را در شبکه هاي اجتماعي دنبال کنيد تا از مطالب جديد ما اطلاع پيدا کنيد با تشکر و احترام







لطفا نظر خود را بنویسید

لطفا نظر خود را بنویسید

0

نظرات کاربران (1)

  • مهمان - امیر محمود

    ببخشید چه کدی رو باید بزنم تا نرم رو به بالا حرکت کنه (الان وقتی روی اون دکمه میزنم میپره و میره بالا) و کجا باید ینویسمش ....



نظرات مشتریان در مورد ما

جناب مهندس موسوی مدیر بخش IT شرکت پارس سرام : ما چهار سایت هلدینگ خود را به تیم مهندسین ساین وب سپردیم فکر نمی کردیم بتوانیم با همچین قیمتی سایتی با این کیفیت و جذاب برایمان طراحی کنند . با اینکه خودم برنامه نویس هستم ایده ها و افکت های جذابی طراحی کردند و هر چهار سایت با هم فرق دارد الان هم سایتی دیگر را به تیم مهندسین ساین وب سپرده ایم

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

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

مهندس هراتی مدیر سایت تهران آهن : از نحوه طراحی سایت و گرافیک سایت و پشتیبانی عالی ساین وب واقعا راضی هستم ما بعد از دو ماه با کلمه قوطی و پروفیل صفحه یک گوگل هستیم از خانم گرایلی مسئول پشتیبانی سایت و کارشناس سئو کمال تشکر را دارم

لطفا مارا در گوگل محبوب کنید