سلام خدمت اعضا و مهمانان محترم.
خُب شاید این سوال خیلی*ها باشه که چطور میشه چیزی مثل بعضی از سایت ها، با کلیک روی لینک با دکمه*ای آروم آروم اسکرول میشه روی قسمت موردنظر، ساخت؟
گذاشتن این امکان هیچ کاری نداره و ما کار را واگذاری میکنیمبه jQuery!
1. مارک آپ یا نشانه گذاری
اولین مرحله، ساختن فایل HTML موردنظر و یا به عبارتی Markup هست.
2. جی کوئری
ما یک لینک با آی دی button ایجاد کردیم و یک لایه هم با آی دی target ایجاد می*کنیم.
حالا باید jQuery را ضمیمه کنیم.
حالا بایستی کد جی*کوئریمان را نیز بنویسیم. پس از ضمیمه کردن jQuery ، با کد زیر جی*کوئری را آماده می*کنیم.
حالا سه متغیر تعریف می*کنیم. به ترتیب: متغیر لینک، متغیر برای لایه مقصد، متغیر موقعیت.
حالا ما باید موقعیت لایه مقصد را از Scroll Top بدست بیاوریم.
حالا برای پایان کار یک Event برای دکمه یا لینکمان تعریف کرده و صفحه را با تابع animate به مقصد Scroll میکنیم.
به جای 500 میتوانید سرعت موردنظرتان را به میلی ثانیه تعریف کنید.
کد کامل:
به همین راحتی!
خُب شاید این سوال خیلی*ها باشه که چطور میشه چیزی مثل بعضی از سایت ها، با کلیک روی لینک با دکمه*ای آروم آروم اسکرول میشه روی قسمت موردنظر، ساخت؟
گذاشتن این امکان هیچ کاری نداره و ما کار را واگذاری میکنیمبه 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>
ما یک لینک با آی دی button ایجاد کردیم و یک لایه هم با آی دی target ایجاد می*کنیم.
حالا باید jQuery را ضمیمه کنیم.
کد:
<script src="//code.jquery.com/jquery.min.js"></script>
کد:
<script>
$(function() {
// code is here
});
</script>
کد:
<script>
$(function() {
var $button= $('#button');
var $target = $('#target');
var pos = 0;
});
</script>
کد:
pos = $target.offset().top;
کد:
$button.click(function(e) {
e.preventDefault();
$('html, body').stop().animate({scrollTop: pos}, 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>