ورود

View Full Version : سوال: حرکت به یه سمت از صفحه


هزاره سوم
پنج شنبه 14 شهریور 1392, 15:52 عصر
سلام دوستان
یه سوال ؟؟؟
میخوام توو طرحم طوری باشه که مثلا روو دکمه new که کلیک شد صفحه آروم بره پایین تر و اون قسمت رو نشون بده..
از چه تکنولوژی باید استفاده کنم؟؟
میشه برام توضیح بدید؟؟
ممنون
Omid Jackson
پنج شنبه 14 شهریور 1392, 16:15 عصر
<head>
<script>
function sc(){
var y = 0;
setInterval(function() {
if( y < 150 ) {
y++;
window.scrollBy(0, 2);
}
}, 3);
}
</script>
</head>

<body>
<input type="button" value="Go" onClick="sc()" />
<br />
Start
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Test
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
End
</body>

اگر متوجه نشدین بگین توضیح بدم
هزاره سوم
پنج شنبه 14 شهریور 1392, 16:26 عصر
ممنون ..اکیه..
f_talebi
پنج شنبه 14 شهریور 1392, 21:04 عصر
Omid Jackson لطفا یه توضیح بدین
Omid Jackson
جمعه 15 شهریور 1392, 00:01 صبح
عذر میخوام، کد رو یه تغییر کوچیک دادم

function sc(){
var y = 0;
setInterval(function() {
if( y < 150 ) {
y++;
window.scrollBy(0, 2);
}
}, 3);
}
با setInterval هر 3 میلی ثانیه تابع اجرا میشه (داخل پرانتز)
چون من اینجا خواستم 300px بیاد پایین یه متغیر تعریف کردم که این دستور scrollBy رو به اون اندازه اجرا کنه یعنی یه شمارنده، چون setInterval تکرار میشه و هر 3 میلی ثانیه 2px اسکرول میکنه میاد پایین
اگر if حذف بشه تا آخر صفحه میره
دلیل گذاشتن setInterval هم برای حالت انیمیشن بود و اگر حذف بشه مستقیم میره به اون مقدار وارد شده

window.scrollBy(0, 300);
بدون حالت انیمیشن فقط همین کد رو میخواد
میشه این کد رو بهینه کرد، یعنی یه تابع بنویسین برای همه Button ها، یه مقداری رو بفرستن برای تابع (موقعیت خودش رو) و از کد زیر استفاده بشه:

function sc(v){
var y = 0;
setInterval(function() {
if( y < v ) {
y++;
window.scrollBy(0, 2);
}
}, 3);
}


<input type="button" value="Go" onClick="sc(150)">
Omid Jackson
جمعه 15 شهریور 1392, 00:06 صبح
البته برای تغیر کد من خودم کد زیر رو پیشنهاد میکنم، چون اگر فاصله زیاد شه یه خورده کلافه کننده میشه!

function sc(v, s){
var y = 0;
setInterval(function() {
if( y < v ) {
y++;
window.scrollBy(0, s);
}
}, 3);
}

<input type="button" value="Go" onClick="sc(150, 2)">

منظور از s همون speed هست که مثلا s پیکسل در هر 3میلی ثانیه جابجا شه
Omid Jackson
جمعه 15 شهریور 1392, 00:17 صبح
با این هم میتونین موقعیت هر المنت تو صفحه رو پیدا کنین:

document.getElementById("id").offsetTop