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

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

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

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

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

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

<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;
	});
	
});

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

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

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