حرکت آروم

[olampiad]

سلام
لطفا سری به این سایت بزنید
http://www.parsiangroup.com/
به نوار منو آن نگا کنید
هر وقت که روی هریک از لینک ها کلیک می کنیم به آرامی به صفحه مورد نظر آن می رود.
چگونه می توانیم چنین کاری انجام دهیم.
ممنون

[sinoser]

خب شما باید با متد position مقدار اون مکان هاتو در بیاری بعد توی رویداد کلیک اون تب بنویسی اسکرول را به مقدار position.top این المان ببر

البته به اسکرول صفحه هم حساس هست یعنی می گه اگر اسکرول صفحه از انداره position.top باکس X بیشتر بود تب مربوطشو اکتیو کن

[olampiad]

من این کد رو توشتم و position از top شی رو به دست آوردم.



<li><a class="#result" href="">Result</a></li>



$('nav li a:link').click(function(){
var bb=$(this).attr('class')
var tt=$(bb).position()
var gg=tt.top;
var hh=$(document).scrollTop(gg)
})


حالا وقتی روی لینک کلیک می کنم زود می ره و بر می گرده
می خوام وقتی روی لینک کلیک کردم آروم بره به سمت position مرد نظر و اونجا ثابت بمونه؟
ممنون

[sinoser]

خب شما باید بذاریشش توی یک window.setInterval و تایم رو بزاری مثلا 100ms و توی هر پالس 0.1 از مقدار gg رو به scroltop بدی تا بعد از 10 پالس تمام بشه

البته تعداد پالساش و تایمش به خودتون بستگی داره نکتش فقط interval هست

[olampiad]

منظورتون این کاره



setInterval(function(){
$(document).scrollTop(gg)
},100)

[sinoser]

نه دیگه این دستور شما ارتفاع رو مستقیم میده و تو پالس اول میرسه به مکان مورد نظر باید این جور تعریف کنی که
با یک متغییر و یک شرط چک کنی تا 10 بار که شد interval پاک بشه
و توی این interval هم باید در هر مرحله

$(document).scrollTop(10/gg)


البته از مدل های توابع easing هم می تونی برای جلوه های سرعتی غیر خطی کمک بگیری

[2undercover]

می تونید از متد animate هم استفاده کنید:


$('a').click(function(e){
e.preventDefault();
$('html, body').animate(
{scrollTop: $('#item-position').offset().top},
500
);
});

[olampiad]

سلام من این کد رو نوشتم

$('nav li a:link').click(function(){
e.preventDefault();
$('html, body').animate(
{scrollTop: $('.tweets').offset().top},
500
);

})

ولی کار نکرد
ممنون

[olampiad]

سلام
منظور از
e.preventDefault(); چه؟
چه نقشی تو کد ایفا می کنه
ممنون

[2undercover]

e که در برگیرنده رویداد هست و متد preventDefault هم باعث میشه اون عملی که پیش فرض هست اعمال نشه.

مثلا وقتی روی یک دکمه Submit کلیک بشه اون فرم ارسال میشه (این میشه اون عمل پیش فرض) که با صدا زدن متد preventDefault دیگه اون عمل پیش فرض (یعنی ارسال فرم انجام نمیشه)

[2undercover]

الان من اینو امتحان کردم و جواب داد:

$('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 1000);

که اسکرول رو به آخر صفحه در 1 ثانیه منتقل می کنه!

[olampiad]

ببخشین
من می خوام موقعی که اسکرول از بالا 500 شد.
یه پیامی بده.
حالا این کد رو نوشتم کار نمی کنه

if($(document).scrollTop()===500){
alert('d')
}

[sinoser]

ببخشین
من می خوام موقعی که اسکرول از بالا 500 شد.
یه پیامی بده.
حالا این کد رو نوشتم کار نمی کنه

if($(document).scrollTop()===500){
alert('d')
}


اره چون اسکرول شما پله ای انجام میشه یعنی مثلا بعد از هر 10 میلی ثانیه رویداد scroll برای پنجرتون فراخوانی میشه واسه همین توی هر پالس یک مقدار رو بر می گردونه
(مقدار scrollTop در رویداد scroll گسسته است)

شما باید بگی

if($(document).scrollTop()>=500 || $(document).scrollTop()>=600){
alert('d')
}


یعنی توی یک بازه شرط رو چک کنی
اگر می خوای دقت بالا بره بازه رو بزرگ بگیر چون اگر کاربر سریع اسکرول کنه شاید الان اون بازه در نتیجه ها نباشه

[sinoser]

الان من اینو امتحان کردم و جواب داد:

$('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 1000);

که اسکرول رو به آخر صفحه در 1 ثانیه منتقل می کنه!

خسته نباشی :)
خب مهندس دوستمونم که گذاشته بود واسه اینم کار نمی کرد که اون مثلا واسه امنت فرض با کلاس .tweets تعریف کرده بود ! شما به جای .tweets اسم کلاس باکسی که می خوای بعد کلیک اسکرول بره روشو بذار