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

مشاوره طراحی سایت: 66467942-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

نظرات کاربران

  • نظری وجود ندارد


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

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

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

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

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

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