Smoothing Scroll یا Animating Scroll در jQuery

EhsaanDev

کاربر عضو
سلام خدمت اعضا و مهمانان محترم.

خُب شاید این سوال خیلی*ها باشه که چطور میشه چیزی مثل بعضی از سایت ها، با کلیک روی لینک با دکمه*ای آروم آروم اسکرول میشه روی قسمت موردنظر، ساخت؟

گذاشتن این امکان هیچ کاری نداره و ما کار را واگذاری میکنیمبه jQuery!

1. مارک آپ یا نشانه گذاری

اولین مرحله، ساختن فایل HTML موردنظر و یا به عبارتی Markup هست.


کد:
<!DOCTYPE HTML>
<html>
    <body>
        <a href="#target" id="button">Go to target</a><br>
        Lorm ipsum...<br>
        <div id="target">Target DIV</div>
        Lorm ipsum
    </body>
</html>
2. جی کوئری

ما یک لینک با آی دی button ایجاد کردیم و یک لایه هم با آی دی target ایجاد می*کنیم.

حالا باید jQuery را ضمیمه کنیم.


کد:
<script src="//code.jquery.com/jquery.min.js"></script>
حالا بایستی کد جی*کوئریمان را نیز بنویسیم. پس از ضمیمه کردن jQuery ، با کد زیر جی*کوئری را آماده می*کنیم.


کد:
<script>
$(function() {
// code is here
});
</script>
حالا سه متغیر تعریف می*کنیم. به ترتیب: متغیر لینک، متغیر برای لایه مقصد، متغیر موقعیت.


کد:
<script>
$(function() {
	var $button= $('#button');
	var $target = $('#target');
	var pos = 0;
});
</script>
حالا ما باید موقعیت لایه مقصد را از Scroll Top بدست بیاوریم.


کد:
pos = $target.offset().top;
حالا برای پایان کار یک Event برای دکمه یا لینکمان تعریف کرده و صفحه را با تابع animate به مقصد Scroll میکنیم.


کد:
$button.click(function(e) {
	e.preventDefault();
	$('html, body').stop().animate({scrollTop: pos}, 500);
});
به جای 500 میتوانید سرعت موردنظرتان را به میلی ثانیه تعریف کنید.

کد کامل:


کد:
<!DOCTYPE HTML>
<html>
	<body>
		<a href="#target" id="button">Go to target</a><br>
		Lorm ipsum...<br>
		<div id="target">Target DIV</div>
		Lorm ipsum
		<script src="//code.jquery.com/jquery.min.js"></script>
		<script>
			$(function() {
				var $button= $('#button');
				var $target = $('#target');
				var pos = 0;
				pos = $target.offset().top;
				$button.click(function(e) {
					e.preventDefault();
					$('html, body').stop().animate({scrollTop: pos}, 500);
				});
			});
		</script>
	</body>
</html>
به همین راحتی!

 
بالا