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

امروزه در اکثر سایت ها به دلیل زیاد بودن مطالب در صفحات ، از دکمه ای استفاده می شود که کاربر با کلیک بر روی آن به بالای صفحه هدایت می شود . در این پست قصد داریم شیوه ی ساخت چنین دکمه ای را به شما آموزش بدهیم. برای ساخت این دکمه از پلاگین ui totop استفاده می کنیم که با حجم کم این کار را به خوبی و با زیبایی خاصی انجام می دهد

دانلود پلاگین

دمو

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

<!-- the necessary css for UItoTop -->
<link rel="stylesheet" type="text/css" media="screen,projection" href="css/ui.totop.css" />
<!-- jquery -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- easing plugin ( optional ) -->
<script src="js/easing.js" type="text/javascript"></script>
<!-- UItoTop plugin -->
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			/*
			var defaults = {
	  			containerID: 'moccaUItoTop', // fading element id
				containerHoverClass: 'moccaUIhover', // fading element hover class
				scrollSpeed: 1200,
				easingType: 'linear'
	 		};
			*/
			$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>

برای تغییر در ظاهر و محل ظاهر شدن دکمه میبایست فایل های ui.totop.png و ui.totop.css را ادیت نمایید.